从印度回来后学了 React 那么久，居然从来没有仔细去看过 React 的生命周期。还是今天被问到的时候，才知道了。
犹记得有那么一段时间，手机的锁屏还是
当年的手机锁屏.png
然而今天并没有完整的说出这所有的过程（按照顺序），分分钟打脸了。
事实上，React 的生命周期主要分为三个过程：装载过程，更新过程，以及卸载过程。
装载过程
把组件第一次在 DOM 树种渲染的过程
image.png
- getDefaultProps()
用来设置组件属性的默认值，在组件被建立时就会立即调用，所有实例都可以共享这些属性。 - getInitialState()
用于定义初始状态。 - componentWillMount()
只在初始化时候被调用一次，可以使用setState方法，会立即更新state，然后会进行render。 - render()
在render中使用setState方法会报错。若其中包含其他的子组件，那么子组件的生命周期才开始进行 - componentDidMount()
在子组件也都加载完毕后执行，DOM 渲染完成，此时就可以操作 DOM 了。但是由于 React 中的 DOM 是虚拟 DOM，因此不推荐操作 DOM。
更新过程
组件被重新渲染的过程
更新过程分为 props 发生改变和 state 发生改变
- props 发生改变
- componentWillReceiveProps(nextProps)
- shouldComponentUpdate(nextProps, nextState)
- componentWillUpdate(nextProps, nextState)
- render()
- componentDidUpdate(prevProps, prevState)
- state 发生改变
- shouldComponentUpdate(nextProps, nextState)
- componentWillUpdate(nextProps, nextState)
- render()
- componentDidUpdate(prevProps, prevState)
其中，
- shouldComponentUpdate(nextProps, nextState)
该方法决定了一个组件什么时候不需要渲染，返回一个布尔值。告诉 React 这个组件在这次更新过程中是否要继续。
shouldComponentUpdate(nextProps, nextState)
通常在该方法中比较当前的 state，props 和 nextState，nextProps 来进行比较。返回 true 或 false 来渲染组件，优化性能。
componentWillUpdate(nextProps, nextState)
在 state 改变或 shouldComponentUpdate 返回 true 后出发componentDidUpdate(prevProps, prevState)
会等子组件也都更新完后才触发
卸载过程
组件从 DOM 中删除的过程
image.png
- componentWillUnmount()
该方法与componentDidMount有关，例如：在componentDidMount中用非 React 的方法创造一些DOM元素，如果不管可能会造成内存泄漏，因此需要componentWillUnmount中把这些创造的DOM元素清理掉。
注意
不要在 shouldCompoentUpdate、componentWillUpdate、componentDidUpdate，以及 render 中使用 setState。
The End ~
21 天写作训练，第 8 天 ing
