##react-学习记录

参考 http://reactjs.cn/

快速开始的话 就是引入 react.js文件以及JSXTransformer.js这两个文件，一个是react的主文件，JSXTransformer是转换JSX语法糖的js文件。

1.一个简单的组件

html代码

<div id="container"></div>

JS代码

var Hello = React.createClass({
    getInitialState() {
        return {
            name : 'jim'  
        };
    },

    render : function(){
        return <h1>{this.state.name}</h1>
        return <h1 className="aa"></h1>
      }}

    )
  React.render(
      <Hello />,
      document.getElementById('container')
    )

需要注意的一点是需要渲染的组件名称首字母必须大写（Hello）

2.给组件绑定事件

html代码

<div id="container"></div>

JS代码

var LikeButton =  React.createClass({
   getInitialState() {
       return {
           liked : false  
       };
   },
   handleClick : function(event){
     this.setState({liked : !this.state.liked});
   },
   render : function(){
     var text = this.state.liked ? '喜欢' : '不喜欢';
     return (
       <p onClick={this.handleClick}>
          you {text} this. 点击切换
       </p>
       );
   }
 });

 React.render(
   <LikeButton />,
   document.getElementById('container')
   )

在jsx中给节点绑定事件，类似在html中绑定事件，不过绑定事件时需要用驼峰式的写法（onClick）.

3.React声明周期的方法

组件的生命周期包含三个主要部分：

* 挂载： 组件被插入到DOM中。
* 更新： 组件被重新渲染，查明DOM是否应被刷新。
* 移除： 组件从DOM中移除。

React提供生命周期方法，你可以在这些方法中放入自己的代码。我们提供will方法，会在某些行为发生之前调用，和did方法，会在某些行为发生之后调用。

挂载

• getInitialState(): object在组件被挂载之前调用。状态化的组件应该实现这个方法，返回初始的state数据。

• componentWillMount()在挂载发生之前立即被调用。

• componentDidMount()在挂载结束之后马上被调用。需要DOM节点的初始化操作应该放在这里。

更新

• componentWillReceiveProps(object nextProps)当一个挂载的组件接收到新的props的时候被调用。该方法应该用于比较this.props和nextProps，然后使用this.setState()来改变state。

• shouldComponentUpdate(object nextProps, object nextState): boolean当组件做出是否要更新DOM的决定的时候被调用。实现该函数，优化this.props和nextProps，以及this.state和nextState的比较，如果不需要React更新DOM，则返回false。

• componentWillUpdate(object nextProps, object nextState)在更新发生之前被调用。你可以在这里调用this.setState()。

• componentDidUpdate(object prevProps, object prevState)在更新发生之后调用。

移除

• componentWillUnmount()在组件移除和销毁之前被调用。清理工作应该放在这里。