react之生命周期渊源

生命周期有哪些以及用法

首次实例化

• getDefaultProps
  做用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享
• getInitialState
  做用于组件的实例，在实例建立时调用一次，用于初始化每一个实例的state，此时能够访问this.props。
• componentWillMount
  在完成首次渲染以前调用，此时仍能够修改组件的state。
• reader
  必选的方法，建立虚拟DOM，该方法具备特殊的规则：
  只能经过this.props和this.state访问数据
  能够返回null、false或任何React组件
  只能出现一个顶级组件（不能返回数组）
  不能改变组件的状态
• componentDidMount
  真实的DOM被渲染出来后调用，在该方法中可经过this.getDOMNode()访问到真实的DOM元素。此时已可 以使用其余类库来操做这个DOM。
  在服务端中，该方法不会被调用。

实例化以后完成的更新

• getInitialState
• componentWillMount
• render
• componentDidMount

组件已存在时的状态改变

• componentWillReciveProps
  组件接收到新的props时调用，并将其做为参数nextProps使用，此时能够更改组件props及state。
• shouldComponentUpdate
  组件是否应当渲染新的props或state，返回false表示跳事后续的生命周期方法，一般不须要使用以免出现bug。在出现应用的瓶颈时，可经过该方法进行适当的优化。
  在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用
• componentWillUpdate
  接收到新的props或者state后，进行渲染以前调用，此时不容许更新props或state。
• render
• componentDidUpdate
  完成渲染新的props或者state后调用，此时能够访问到新的DOM元素。

组件销毁

• componentWillUnmount

生命周期函数的渊源

自定义组件（ReactCompositeComponent）的生命周期主要经过三种状态进行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING，它们负责通知组件当前所处的状态，应该执行生命周期中的哪一个步骤，是否能够更新 state。三个状态对应三种方法，分别为：mountComponent、updateComponent、unmountComponent，每一个方法都提供了两种处理方法

getDefaultProps

• 这个生命周期函数是在组件初始化构造函数中执行，因此只执行一次

  // 构造函数
      var Constructor = function(props, context) {
        this.props = props;
        this.context = context;
        this.state = null;
        var initialState = this.getInitialState ? this.getInitialState() : null;
        this.state = initialState;
      };

状态一：MountComponent

• 因为react构建的是虚拟DOM因此要准备开始渲染页面以前拿到的虚拟的DOM，须要通过组装以后而后给到浏览器，在这里会发生：首先会经过getInitialState拿到初始化的数据

  // 当前状态为 MOUNTING
    this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;
  
    // 当前元素对应的上下文
    this.context = this._processContext(this._currentElement._context);
  
    // 当前元素对应的 props
    this.props = this._processProps(this.props);
  
    // 获取初始化 state
    this.state = this.getInitialState();

• 而后判断若是有componentwillMount就会运行这里的js语法，在这里若是有state发生变化不会立刻出发render而是与initialState进行，组成新的state；这里渲染的时候是经过递归的方式进行渲染因此父组件的componentWillMount在子组件的componentWillMount以前执行，而子组件的componentDidMount在父组件的componentDidMount以前执行，这块可能有点绕，直接上代码

  // render 递归渲染
    var markup = this._renderedComponent.mountComponent(
      rootID,
      transaction,
      mountDepth + 1
    );

• 这样就把dom与state以及props数据拿到就能够完整的进行渲染
• 最后判断是否有componentDidMount，若是有会执行这里的js

状态二：receive Props

updateComponent 负责管理生命周期中的 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。

• compnentWillReciveProps中setState在componentWillReceiveProps、shouldComponentUpdate 和 componentWillUpdate 中仍是没法获取到更新后的 this.state，即此时访问的this.state 仍然是未更新的数据，只有在 render 和 componentDidUpdate 中才能获取到更新后的this.state。
• 禁止在 shouldComponentUpdate 和 componentWillUpdate 中调用 setState，会形成循环调用，直至耗光浏览器内存后崩溃。(若是在 shouldComponentUpdate 或 componentWillUpdate 中调用 setState，此时的状态已经从 RECEIVING_PROPS -> NULL，则 performUpdateIfNecessary 就会调用 updateComponent 进行组件更新，但 updateComponent 又会调用 shouldComponentUpdate 和 componentWillUpdate，所以形成循环调用，使得浏览器内存占满后崩溃。)

状态三：unMountComponent

• 在 componentWillUnmount 中调用 setState，是不会触发 reRender。