React-学习总结
概念知识：
1.JSX是什么
JSX其实是JavaScript的扩展，React为了代码的可读性更方便地创建虚拟DOM等原因，加入了一些类似XML的语法的扩展。 2.编译器——jsxTransformer
JSX代码并不能直接运行，需要将它编译成正常的JavaScript表达式才能运行，jsxTransformer.js就是这一编译器的角色。
3.第二代编译器——babel
React官方博客发布了一篇文章，声明其自身用于JSX语法解析的编译器JSTransform已经过期，不再维护，React JS和React Native已经全部采用第三方Babel的JSX编译器实现。原因是两者在功能上已经完全重复，而Babel作为专门的JavaScript语法编译工具，提供了更为强大的功能。而browser.js是babel编译器的浏览器版本。 在react 0.14前，浏览器端实现对jsx的编译依赖jsxtransformer.js
在react 0.14后，这个依赖的库改为browser.js
页面script标签的type也由text/jsx改为text/babel
1. 组件名称开头必须大写
var NewList = React.createClass(){}
2.ReactDOM.render是React最基本的方法，用于将模板转化为HTML语言 并插入制定DOM节点
3.事件都使用骆驼命名法：onClick onChange等
4、this.props.children 表示组件的所有子节点
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
// props获取父组件的数据
// this.props.children.map(function(child){})
// var rows = this.props.children;React.Children.map(rows,function(child){})
React.Children.map(this.props.children, function (child) { // React 提供一个工具方法 React.Children 来处理 this.props.children
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取
5.获取子元素的长度:render:function(){return(<p>count子元素长度：{React.Children.count(this.props.children)}</p>)}
6.获取DOM节点-ref属性
<input type="text" ref="txtData">
获取文本框的值
var inputDom = this.refs.txtData; // 不需要使用findDOMNode()方法
var data = inputDom.value;
7.React提倡所有的数据都是由父组件来管理，通过props的形式传递给子组件来处理 this.props
React开发的规范，组件内部的数据由state控制，外部对内部传递数据时使用 props
8.在组建中添加多个属性写法：
var Info = React.createClass({
render:function(){
var myAttr = {
'ref ': 'txtData',
'data-id': 'inputID',
'onClick': function () {
console.log("onClick");
}
}
return <input type="button" {...myAttr} value={this.props.name} /> // {...myAttr}绑定多个属性
}
})
ReactDOM.render(<Info name="I AM A BUTTON" />,document.getElementById('box'));
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<style>
ul{margin:;padding:;}
ul li{list-style: none;}
.ul-box{margin-top:20px;}
.ul-box li{margin-top:10px;}
button{margin-left:10px;background: #f1f1f1;border:1px solid #e2e2e2;padding:6px 10px;}
.input-txt{height: 27px;line-height: 27px;border:1px solid #e2e2e2;}
</style>
</head>
<div id="container"></div>
<!-- <script type="text/babel"></script>webstorm暂时不支持这一种 -->
<script type="text/jsx">
// 增删改Demo
// this.props.todo.map 循环
var TodoList = React.createClass({
// 初始化数据
getInitialState:function(){
return{
todoList:[]
}
},
// 更新数据
changeHandle:function(rows){
this.setState({
todoList : rows
})
}, render:function(){
return(
<div>
<NewList onAdd={this.changeHandle} todo={this.state.todoList}/>
<ShowList onDel={this.changeHandle} todo={this.state.todoList} onSave={this.changeHandle}/> </div>
)
}
}); // 新增
var NewList = React.createClass({
addHandle:function(e){
e.preventDefault();
// 从父组件获取数据 使用props
var rows = this.props.todo;
// 获取文本框的值
var inputNew = this.refs.txtNewDate;
var newData = inputNew.value.trim();
if(newData != ""){
// 追加到原来的数据中
rows.push(newData);
this.props.onAdd(rows);
}
inputNew.value = "";
},
render:function(){
return(
<form onSubmit={this.addHandle}>
<input className="input-txt" type="text" placeholder="新增内容" ref="txtNewDate" id="txtNewDate"/>
<button onClick={this.addHandle}>新增</button>
</form>
)
}
})
// 展示+修改+删除
var ShowList = React.createClass({
delHandle:function(e){
// 获取要删除的索引
var delIndex = e.target.getAttribute("data-key");
this.props.todo.splice(delIndex,);
this.props.onDel(this.props.todo);
},
editHandle:function(e){
// 将原本的值赋值到文本框
// 将按钮文字改为保存
var inputNew = document.getElementById("txtNewDate");
//console.log(e.target.innerHTML)
inputNew.value = e.target.getAttribute("data-item");
},
saveHandle:function(e){
var saveIndex = e.target.getAttribute("data-key");
var rows = this.props.todo; React.Children.map(rows,function(item,i){
if(i == saveIndex){
// 保存时存在相同id则删除原来的
rows.splice(saveIndex,);
}
})
var inputNew = document.getElementById("txtNewDate");
var saveData = inputNew.value.trim();
rows.push(saveData);
this.props.onSave(rows);// 更新render
},
render:function(){
var children = this.props.todo;
var childArray = React.Children.toArray(children); return(
<div>
<h3>toArray数组排序：{childArray.sort().join(' ')}</h3>
<p>count长度：{React.Children.count(this.props.todo)}</p>
<ul className="ul-box">
{
// 循环li
// 方法一：this.props.todo.map(function(item,i){})
React.Children.map(children,function(item,i){
var id = "itemList";
return(
<li>
<label data-id={id-i}>{item}</label>
<button data-key={i} onClick={this.delHandle}>删除</button>
<button data-key={i} data-item={item} onClick={this.editHandle}>修改</button>
<button data-key={i} onClick={this.saveHandle}>保存</button>
</li>
)
}.bind(this))
}
</ul>
</div>
) }
})
ReactDOM.render(<TodoList/>,document.getElementById("container"));
</script>
</body>
</html>
学习参考：
http://www.ruanyifeng.com/blog/2015/03/react.html
https://www.cnblogs.com/wangfupeng1988/p/5302738.html
React-学习总结的更多相关文章
- React学习笔记-1-什么是react，react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- React学习资料
以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- react 学习与使用记录
相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
- 【JAVASCRIPT】React学习-如何构建一个组件
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 组件化思想 组件就是 UI + UI 交互逻辑,组件有三个常规map , 分别为state 状态 . props 数据 ...
- 【JAVASCRIPT】React学习- 数据流（组件通信）
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...
随机推荐
- OgnlValueStack:49 - Error setting expression 'sfjmyh.zdyx6' with value '[Ljava.lang.String;@28d320d6'
作过户管理流程时,提交表单后控制台显示如下错误 : WARN com.opensymphony.xwork2.ognl. OgnlValueStack:60 - Error setting expre ...
- winform MDI子窗口闪动问题
在网上看到的 不知道什么原理但真的很实用 将下面的代码随便放到主窗体的任何一个地方 protected override CreateParams CreateParams { get ...
- 《windows核心编程》 17章 内存映射文件
内存映射文件主要用于以下三种情况: 系统使用内存映射文件载入并运行exe和dll,这大量节省了页交换文件的空间以及应用程序的启动时间 开发人员可以使用内存映射文件来访问磁盘上的数据文件.这使得我们可以 ...
- python使用单例模式创建MySQL链接
代码: from functools import wraps import mysql.connector from sshtunnel import SSHTunnelForwarder def ...
- Android BlueDroid（三）：BlueDroid蓝牙开启过程enable
关键词:bluedroid enableNative BTIF_TASK BTU_TASK bt_hc_work_thread set_power preload GKI作者:xubin3417 ...
- C++语言基础(14)-typeid
typeid可用来判断类型是否相等: 例如有下面的定义: char *str; ; ; float f; 类型比较 结果 类型比较 结果 typeid(int) == typeid(int) true ...
- .align
.align的作用是针对指令或数据的存放地址对齐.但不同的CPU架构,指令和数据的存储方式不同,也就导致对齐的计量单位不一样. i386:n对齐 ARM:2^n 对齐,ARM架构下,指令都是占32位, ...
- python c example2:pylame2
#include <Python.h> #include <lame.h> //pyton object variables typedef struct{ PyObject_ ...
- Git merge two repositories (ZZ)
转自 https://stackoverflow.com/questions/2428137/how-to-rebase-one-git-repository-onto-another-one If ...
- centos修改启动顺序，登录后提示，启动级别，主机名，免密登录
修改启动顺序 # vim /etc/inittab ....... d:3:initdefault: #找到这一行,d:3:initdefault:最小化启动 d:5:initdefault:图形界 ...