react组件的生命周期

组件的生命周期可分成三个状态：

   Mounting：  已插入真实DOM 指react组件被render解析生成对应的dom节点并插入到浏览器整个过程。
   Updating：  正在被重新渲染 指一个已经mounted的react组件被render重新渲染的过程。（每当组件的state值发生变化，都会自动执行Updating这个过程，重新渲染页面）
   Unmounting：已移出真实DOM 指一个已经mounted的react组件对应的dom节点被从dom结构移除的过程。

对于组件的每一种状态都封装有多个hook函数（相当于监听状态变化以做出事件响应）：

  componentWillMount 在渲染前调用,在客户端也在服务端。

  componentDidMount : 在第一次渲染后调用，只在客户端。
    之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout,  setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

  componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

  shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
可以在你确认不需要更新组件时使用。

  componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

  componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
  componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

Mounting状态的整个具体执行过程

 getDefaultProps 首先初始化组件默认属性Props
 getInitialState 然后初始化组件默认状态State
 componentWillMount 再执行render函数渲染页面之前会调用这个函数
 render         执行render函数渲染页面
 componentDidMount  在Mounting状态结束后调用

//举个例子验证这个过程：
 var Hello = React.createClass({
        //初始化属性Props
          getDefaultProps:function(){
               alert('initProps');
               return{
               name:'world222'
               };
          },
        //初始化状态state
         getInitialState:function(){
             alert('initState');
             return{
               color:'red',
               fontsize:'12px'
             };
         },
        //渲染页面的方法
         render:function(){
            return <div style={this.state}>Hello {this.props.name}</div>;
         },
       //在即将调用render函数前执行的hook函数
         componentWillMount:function(){
            alert('will');
         },
       //在render函数执行结束后执行的hook函数
         componentDidMount:function(){
            alert('did');
            var self = this;
            //再hook函数中写个定时器，一秒后改变组件的状态，重新渲染页面
            window.setTimeout(function(){
              self.setState({
                      color:'green',
                      fontSize:'30px'
              });
            },1000);
         }
      });

  ReactDOM.render(
          <Hello/>,
        document.getElementById('example')
        );
  //执行结果： 打印initProps  initState  will  页面显示hello world  打印did  一秒后页面文字变绿变大

Updating状态的整个具体执行过程

  componentWillReceiveProps 若组件在重新渲染时接收到新的props属性，会调用这个函数
  shouldComponentUpdate  组件接收到新的属性或状态时调用这个函数，在函数中会根据新的属性或状态来判断渲染时是否改变dom节点。
  componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用
  render 执行render函数，渲染页面
  componentDidUpdate 整个updating过程结束后执行这个函数。

Updating状态的整个具体执行过程

Unmounting  组件从 DOM 中移除的时候立刻调用此函数。

react组件的生命周期

猜你喜欢