React生命周期浅析

引言

关于React的生命周期API，官网，有着详细说明。但在实际写代码的过程中，这些说明不能解决所有的疑惑。 所以我列举了一些编码中常见用例，供大家参考。

示例代码如下

/*
  use case
  1. mixin中重名生命周期方法
  2. 重复React.render同个组件
  3. 从 mount 到 unmount 再到 mount
  4. 子组件两次加载
  5. 父组件update
  6. 改变子组件的包裹
*/

var IamMixinObject = {
  componentDidMount: function(){
    console.log('mixin里的componentDidMount');
  }
};

var SonClass = React.createClass({
  mixins: [IamMixinObject],
  getDefaultProps:function(){
    console.log("getDefaultProps");
  },
  componentWillReceiveProps :function(){
    console.log("componentWillReceiveProps");
  },
  getInitialState:function(){
    console.log("getInitialState");
    return {};
  },
  componentWillMount:function(){
    console.log("componentWillMount");
  },
  componentWillUpdate:function(){
    console.log("componentWillUpdate");
  },
  shouldComponentUpdate:function(){
    console.log("shouldComponentUpdate");
    return true;
  },
  render: function(){
    console.log("render");
    return null;
  },
  componentDidUpdate: function(){
    console.log('componentDidUpdate');
  },
  componentDidMount: function(){
    console.log('componentDidMount');
  },
  componentWillUnmount: function(){
    console.log('componentWillUnmount');
  }
});


// 1. mixin中重名生命周期方法
React.render(<SonClass />, document.getElementById("forTest"));
/*
  mixin里的componentDidMount 会先于 componentDidMount输出。
  其实，mixin中和组件同名的生命周期方法，都是mixin中先执行。
*/


// 2. 重复React.render同个组件
React.render(<SonClass />, document.getElementById("forTest"));
React.render(<SonClass />, document.getElementById("forTest"));
/*
  输出：
  getDefaultProps
  getInitialState
  componentWillMount
  render
  mixin里的componentDidMount
  componentDidMount

  componentWillReceiveProps
  shouldComponentUpdate
  componentWillUpdate
  render
  componentDidUpdate 
  总结：
  第二次mount同个render组件，相当于改变 组件props。
*/

// 3. 从 mount 到 unmount 再到 mount
React.render(<SonClass />, document.getElementById("forTest"));
React.unmountComponentAtNode(document.getElementById("forTest"));
React.render(<SonClass />, document.getElementById("forTest"));
/*
  输出：
  getDefaultProps
  getInitialState
  componentWillMount
  render
  mixin里的componentDidMount
  componentDidMount
  componentWillUnmount

  getInitialState
  componentWillMount
  render
  mixin里的componentDidMount
  componentDidMount
  总结：
  unmount的时候，确实调用了componentWillUnmount方法，第二次mount的时候，并没有执行getDefaultProps方法。
  是因为，getDefaultProps Invoked once and cached when the class is created。
  它在组件类创建的时候被调用一次，其返回值会被缓存。
*/


// 4. 子组件两次装载
var FatherClass = React.createClass({
  render:function(){

    return (
      <div>
        <SonClass />
        <SonClass />      
      </div>
    )
  }
});
React.render(<FatherClass />, document.getElementById("forTest"));
/*
  输出：
  getDefaultProps
  getInitialState
  componentWillMount
  render
  getInitialState
  componentWillMount
  render

  mixin里的componentDidMount
  componentDidMount
  mixin里的componentDidMount
  componentDidMount
  总结：
  发现两次componentDidMount是后面连续触发。
  这里涉及到React的batchUpdate机制，需要另一篇文章详解。
  大概机制是，
  因为setState是异步的。
  它把变化存入一个临时队列，渲染完新的内容后才调用所有 componentDidUpdate或componentDidMount。

*/

// 5. 父组件update
var FatherClass = React.createClass({
  getInitialState:function(){
    
    return {
      changeFlag:false
    };
  },
  changeSon:function(){
    var changeFlag = this.state.changeFlag;
    this.setState({
      changeFlag: !changeFlag
    });
  },
  render:function(){
    return (
      <div onClick={this.changeSon} >
        <SonClass />                
      </div>
    )
  }
});
React.render(<FatherClass />, document.getElementById("forTest"));
/*
  输出：
  getDefaultProps
  getInitialState
  componentWillMount
  render
  mixin里的componentDidMount
  componentDidMount

  componentWillReceiveProps  
  shouldComponentUpdate
  componentWillUpdate
  render
  componentDidUpdate
  总结：
  父组件setState了，对于子组件是setProps了
*/

// 6. 改变子组件的包裹
var FatherClass = React.createClass({
  getInitialState:function(){
    
    return {
      changeFlag:false
    };
  },
  changeSon:function(){
    var changeFlag = this.state.changeFlag;
    this.setState({
      changeFlag: !changeFlag
    });
  },
  render:function(){
    var changeFlag = this.state.changeFlag; 
    var Son = changeFlag ? <SonClass /> : <div>new son<SonClass /></div>

    return (
      <div onClick={this.changeSon} >
        父组件在此          
        {
            Son
        }        
      </div>
    )
  }
});
React.render(<FatherClass />, document.getElementById("forTest"));
/*
  输出：
  getDefaultProps
  getInitialState
  componentWillMount
  render
  mixin里的componentDidMount
  componentDidMount

  componentWillUnmount

  getInitialState
  componentWillMount
  render
  mixin里的componentDidMount
  componentDidMount
  总结：
  父组件setState改变了子组件的包裹，子组件相当于重新mount

*/