一，React是什么？
它是一个库，一个javascript库，
1，React的用处？
用于构建用户界面，通常被理解为MVC中的V；
2，React的用例？
3，HTML模板：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script> //React核心库
<script src="../build/react-dom.js"></script> //提供与DOM相关的功能
<script src="../build/browser.min.js"></script> //将JSX语法转换为JavaScript语法，耗
时，一般在上线时在服务器上进行
</head>
<body>
<div id="example"></div>
<script type="text/babel"> //React独有的JSX语法,跟JavaScript
不兼容。凡是使用 JSX 的地方，都要加
上 type="text/babel"
// ** Our code goes here! **
</script>
</body>
</html>$ babel src --out-dir build 上面命令可以将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。
二，ReactDOM.Render（）
1，Render：渲染的意思
2，它是React中最基本的语法，他将模板转换为HTML，并插入到DOM中，
三，JSX 语法
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div> //遇到 HTML 标签（以 < 开头），就用 HTML 规则解析
//遇到代码块（以 { 开头），就用 JavaScript 规则解析
})
}
</div>,
document.getElementById('example')
);四，组件
1，React允许将代码块封装成组件（component），然后像插入普通HTML标签一样进行使用，
2，创建组建的方法：React.createClass方法；
var HelloWorld = React.createClass({
render:function(){
return <h1>hello world {this.props.name}</h1>
}
});
ReactDom.render(
<HelloWorld name="Tal"/>,
document.getElementById('divId')
);注意：
1，HelloWorld就是一个组件类；
2，程序执行到<HelloWorld/>标签时，会生成一个HelloWorld的一个实例，也就是组件。
3，所有的组件都有一个render方法，用输出组件
4，组件类的第一个字母必须大写，否则会报错。
5，组件类必须只能包含一个顶层表签，否则会报错。
6，加载组件时以为组件添加属性，例如name属性，组件类可通过this.props.name获取该属性值；
7，添加class属性时需写成className，for写成htmlFor，这是应为这两个属性时JavaScript的保留字；
五，this.props.children
this.props.children 属性。它表示组件的所有子节点;
注意;
使用这个方法时 this.props.children；
1，如何当前没有子节点，返回uindefined；
2，如果有一个，返回Object数据类型；
3，如果有多个，返回Array数据类型；
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。
六、PropTypes
它是用来验证足组件实例的属性是否符合要求。
七、获取真实的DOM节点
1，组件是存在于内存的数据结构，并不是真正的dom节点，他被称为虚拟DOM，只有当他插入文本以后才会变成真正的DOM，
2，根据React的设计，所有的改动都发成在虚拟DOM上，然后再反应在真实的DOM上，这种算法叫做DOM diff；
3，如果用到真实的DOM节点，React提供了ref属性；（当获取用户输入的内容的时候，就需要获取到真实节点）
var MyComponent = React.createClass({
hanldeClick: function(){
this.refs.myTextInput.focus();
},
render: function(){
return (
<div>
<input type="text" ref="MyTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
)
}
})
ReactDOM.render(
<Mycomponent />,
document.getElementById('divId')
);注意：
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
八，this.state
1，组件需要与用户互动，
2，state可以看成React的状态机，
3，开始是有一个初始状态，与用户互动后，获得新的状态并重新渲染UI
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
); 4，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
5，this.props和this.state的区别；
（1），props用来获取不能修改的属性；
（2），state用来获取与用户交互的属性；
九、表单
用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.body); 1,文本输入框的值，不能用 this.props.value 读取;
2,要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值;
3,textarea 元素、select元素、radio元素都属于这种情况，
十、组件的生命周期
1,组件周期的三个状态：
（1），Mountiong：已插入真实DOM；
（2），Updating：正在被渲染；
（3），UnMounting：已移除真实DOM；
2，每个状态有两个处理函数：will进入状态之前调用，did进入状态之后调用。
（1），componentWillMount()
（2），componentDidMount()
（3），componentWillUpdate(object nextProps, object nextState)
（4），componentDidUpdate(object prevProps, object prevState)
（5），componentWillUnmount()
3，此外React还提供两种特殊的状态：
（1），componentWillReceiveProps(Object nextProps):已加载组件收到新的参数时调用；
（2），shouldComponentUpdate(Object nextProps,Object nextState):判断组件是否重新渲染时调用；
4，例子：
var Hello = React.createClass({
getInitialState:function(){
return:{
opacity:1.0
};
},
componentDidMount: function(){
this.timer = setInterval(function(){
var opacity = this.state.opacity;
opacity-=0.5;
if(opacity<0.1){
opacity = 0.1;
}
this.setState(
{opacity:opacity}
);
}.bind(this),100);
},
render: function(){
return(
<div style={{opacity:this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.body
)上述代码在Hello组件加载后，通过componentDidMount方法设置一个定时器，每个100毫秒就重设置逐渐的透明度，从而引发重新渲染。
另外，组件的style属性的设置方式也值得注意，不能写成
style="opacity:{this.state.opacity};"
而要写成
style={{opacity: this.state.opacity}}
这是因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
十一、Ajax
1，组件的数据来源，是通过Ajax从服务器上获取的；
2，可以通过componentDidMount方法来设置Ajax请求；
3，等待请求成功后，再用this.state的方法重新渲染组建；
4，例如
var UserDate = React.createClass({
getInitialState:function(){
return{
username:'',
userGistUrl:''
};
},
componentDidMount: function(){
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
},
render: function(){
return(
<div>
{this.state.username},last gist is
<a herf={this.state.lastGistUrl}>here</a>
</div>
);
}
});
ReactDOM.render(
<UserDate source="https://api.github.com/users/octocat/gists"/>
document.body
)