React 生命周期

从印度回来后学了 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 发生改变

其中，

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