React——生命周期

三大阶段：
创建期：在组件创建的时候出现
存在期：在组件发生属性或者状态数据改变的时候
销毁期：组件从页面中移除的时候

创建期

1 getDefaultProps 设置默认属性
2 getInitialState 设置初始状态
3 componentWillMount 组件将要被构建(虚拟dom)
4 render 组件渲染输出虚拟dom
5 componentDidMount 组件已经构建完成(真是dom)

var Div = React.createClass({
  getDefaultProps: function() {
    console.log('我是:getDefaultProps');
    return {};
  },
  getInitialState: function(){
    console.log('我是:getInitialState');
    return {};
  },
  componentWillMount: function() {
    console.log('我是：componentWillMount');
  },
  render: function) {
    console.log('我是：render');
    return (
      <div>我叫好奇心日报</div>
    );
  },
  componentDidMount: function() {
    console.log('我是：componentDidMount');
    console.log(ReactDOM.findDOMNode(this));
  }
});

先来看下执行顺序：

Paste_Image.png

• 第一个阶段(getDefaultProps)：我们无法访问任何数据，因此此函数执行完毕之后，组件才拥有了属性。
• 第二个阶段(getInitialState)：我们可以访问到属性，但是访问不到状态。因此在这个阶段我们可以用属性为初始化状态赋值。
• 第三个阶段(componentWillMount): 我们可以访问到属性和状态
• 第四个阶段(render): 我们可以访问到属性和状态，但是访问不到真实dom元素
• 第五个阶段(componentDidMount): 我们可以访问到真实dom元素，通过ReactDOM.findDOMNode(this)此方法。

存在期

1 componentWillReceiveProps 组件即将接收新的属性
2 shouldComponentUpdate 组件是否应该更新
3 componentWillUpdate 组件即将更新
4 render 渲染输出虚拟DOM
5 componentDidUpdate 组件已经更新完毕

var Div = React.createClass({
 componentWillReceiveProps: function(nextProps) {
    console.log('我是:componentWillReceiveProps');
  },
 shouldComponentUpdate: function(nextProps, nextState){
    //第一个参数表示新的属性
    //第二个参数表示新的状态
    console.log('我是:shouldComponentUpdate');
    return true;
  },
 componentWillUpdate: function(nextProps, nextState) {
    //第一个参数表示新的属性
    //第二个参数表示新的状态
    console.log('我是：componentWillUpdate');
  },
  render: function) {
    console.log('我是：render');
    return (
      <div>我叫好奇心日报</div>
    );
  },
  componentDidUpdate: function(nextProps, nextState) {
    //第一个参数表示上一个属性
    //第二个参数表示上一个状态
    console.log('我是：componentDidUpdate');
    console.log(ReactDOM.findDOMNode(this));
  }
});

需要注意点：

• 第一个阶段(componentWillReceiveProps): 这个阶段的触发只能由属性改变触发。在此阶段我们可以将属性数据，转化成状态数据。
• 第二个阶段(shouldComponentUpdate): 这个阶段必须有返回值。 true表示可以更新，false表示不可以更新。
• 第三个阶段(componentWillUpdate): 这个阶段更新了属性和状态。
• 第四个阶段(render): 这个阶段更新了虚拟DOM,因此前面的方法访问的都是旧的虚拟DOM,只有最后一个阶段访问的才是新的虚拟DOM
• 第五个阶段(componentDidUpdate) 这个阶段可以访问到新的虚拟DOM

销毁期

componentWillUnmount: 在删除组件之前进行清理操作，比如计时器和事件监听。