React生命周期（源码分析）

 自我总结：
生命周期是在调用mountComponent和updateComponent里调用的，那么mountComponent和updateComponent目测会在ReactDom.render 和setState等会被调到

 

 

一.实例化生命周期
1.初始化组件类只运行一次。可以把它简单类比为Java中的Class对象。类对象的初始化不要错误理解成了实例对象的初始化。一个React组件类可能会在JSX中被多次调用，产生多个组件对象，但它只有一个类对象，也就是类加载后getDefaultProps就不会再调用了。
2.getInitialState
这个方法在创建组件实例对象的时候被调用，具体代码位于React.creatClass()的Constructor函数中


3.mountComponent先做实例对象的props,state等初始化，然后调用performInitialMount初始化挂载，完成后调用componentDidMount。这个调用链还是很清晰的。下面我们重点来分析performInitialMountWithErrorHandling和performInitialMount
可见performInitialMountWithErrorHandling只是多了一层错误处理而已，关键还是在performInitialMount中。

performInitialMount中先调用componentWillMount()，再将setState()产生的state改变进行state合并（将state提前合并，故在componentWillMount中调用setState不会触发重新render，而是做一次state合并。这样做的目的是减少不必要的重新渲染
      i），然后调用_renderValidatedComponent()返回ReactElement，它会调用render()方法。然后由ReactElement创建ReactComponent。最后进行递归渲染。下面来看renderValidatedComponent()

二.存在期生命周期
1.setState机制后面会有单独文章分析，现在只用知道它会调用updateComponent()来完成更新即可。
2.updateComponent内部提前合并state,componentWillReceiveProps中调用setState不会重新渲染,在此处做合并即可,因为后面也是要调用render的  // 这样可以避免没必要的渲染
3.updateComponent中，先调用componentWillReceiveProps，然后合并setState导致的state变化。然后调用shouldComponentUpdate判断是否需要更新渲染。如果需要，则调用_performComponentUpdate执行渲染更新，下面接着分析performComponentUpdate。

4.performComponentUpdate会调用componentWillUpdate，然后在调用updateRenderedComponent进行更新渲染，最后调用componentDidUpdate。下面来看看updateRenderedComponent中怎么调用render方法的。

5.和mountComponent中一样，updateComponent也是用递归的方式将各子组件进行update的。这里要特别注意的是DOM diff。DOM diff是React中渲染加速的关键所在，它会帮我们算出virtual DOM中真正变化的部分，并对这部分进行原生DOM操作。为了避免循环递归对比节点的低效率，React中做了假设，即只对层级不变，type不变，key不变的组件进行Virtual DOM更新。这其中的关键是shouldUpdateReactComponent，下面分析
6./ React DOM diff算法
  // 如果前后两次为数字或者字符,则认为只需要update(处理文本元素)
  // 如果前后两次为DOM元素或React元素,则必须在同一层级内,且type和key不变(key用于listView等组件,很多时候我们没有设置type)才update,否则先unmount再重新mount

7.递归。目测是ReactReconciler

三.销毁
可见，unmountComponent还是比较简单的，它就做三件事

调用componentWillUnmount()
递归调用unmountComponent(),销毁子组件
将内部变量置空，防止内存泄漏