正确掌握React 生命周期(Lifecycle)

前言

• 首先, 当面对一些问题:

  • 1 React 用了这么久，常常遇到的问题是setState在这里写合适吗？

  • 2 为何setState写在这里形成了重复渲染屡次？

  • 3 为何你的setState用的这么乱?

  • 4 组件传入props是更新呢？从新挂载呢？仍是怎样？

  • 5 ...

• 其次, 生命周期能够看到整个Component的运行过程, 在coding的时候很天然的找好他们的位置, 合做起来就会方便多了，这里极力推荐airbnb的react coding 规范.

• 因此整理了这篇文章。若是错误，欢迎指正。

一 生命周期的8个方法

1 componentWillMount()

• 执行场景

  • 在render()方法以前

• 解释

  • 1 由于componentWillMount是在render以前执行，因此在这个方法中setState不会发生从新渲染(re-render);

  • 2 这是服务端渲染(server render)中惟一调用的钩子(hook);

  • 3 一般状况下，推荐用constructor()方法代替;

2 render()

• 执行场景

  • 1 在componentWillMount()方法以后

  • 2 在componentWillReceive(nextProps, nextState)方法以后

• 解释

  • ==

3 componentDidMount()

• 执行场景

  • 在render()方法以后

• 解释

  • 1 这个方法会在render()以后当即执行；

  • 2 这里能够对DOM进行操做，这个函数以后ref变成实际的DOM(@TODO 表述可能不清晰);

  • 3 这里能够加载服务器数据，而且若是使用了redux之类的数据服务，这里能够出发加载服务器数据的action;

  • 4 这里可使用setState()方法触发从新渲染(re-render);

4 componentWillReceiveProps(nextProps)

• 执行场景

  • 在已经挂在的组件(mounted component)接收到新props时触发;

  • 简单的说是在除了第一次生命周期(componentWillMount -> render -> componentDidMount)以后的生命周期中出发;

• 解释

  • 1 若是你须要在props发生变化(或者说新传入的props)来更新state，你可能须要比较this.props和nextProps, 而后使用this.setState()方法来改变this.state;

• 注意

  • 1 React可能会在porps传入时即便没有发生改变的时候也发生从新渲染, 因此若是你想本身处理改变，请确保比较props当前值和下一次值; 这可能形成组件从新渲染;

  • 2 若是你只是调用this.setState()而不是从外部传入props, 那么不会触发componentWillReceiveProps(nextProps)函数；这就意味着: this.setState()方法不会触发componentWillReceiveProps(), props的改变或者props没有改变才会触发这个方法;

5 shouldComponentUpdate(nextProps, nextState)

• 执行场景

  • 在接收到新props或state时，或者说在componentWillReceiveProps(nextProps)后触发

• 解释

  • 在接收新的props或state时肯定是否发生从新渲染，默认状况返回true，表示会发生从新渲染

• 注意

  • 1 这个方法在首次渲染时或者forceUpdate()时不会触发;

  • 2 这个方法若是返回false, 那么props或state发生改变的时候会阻止子组件发生从新渲染;

  • 3 目前，若是shouldComponentUpdate(nextProps, nextState)返回false, 那么componentWillUpdate(nextProps, nextState), render(), componentDidUpdate()都不会被触发;

  • 4 Take care: 在将来，React可能把shouldComponentUpdate()当作一个小提示(hint)而不是一个指令(strict directive)，而且它返回false仍然可能触发组件从新渲染(re-render);

• Good Idea

  • 在React 15.3之后, React.PureComponent已经支持使用，我的推荐，它代替了(或者说合并了)pure-render-mixin，实现了shallowCompare()。扩展阅读

6 componentWillUpdate(nextProps, nextState)

• 执行场景

  • 在props或state发生改变或者shouldComponentUpdate(nextProps, nextState)触发后, 在render()以前

• 解释

  • 1 这个方法在组件初始化时不会被调用;

• 注意

  • 1 千万不要在这个函数中调用this.setState()方法.;

  • 2 若是确实须要响应props的改变，那么你能够在componentWillReceiveProps(nextProps)中作响应操做;

  • 3 若是shouldComponentUpdate(nextProps, nextState)返回false，那么componentWillUpdate()不会被触发;

7 componentDidUpdate(prevProps, prevState)

• 执行场景

  • 在发生更新或componentWillUpdate(nextProps, nextState)后

• 解释

  • 1 该方法不会再组件初始化时触发;

  • 2 使用这个方法能够对组件中的DOM进行操做;

  • 3 只要你比较了this.props和nextProps，你想要发出网络请求(nextwork requests)时就能够发出, 固然你也能够不发出网络请求;

• 注意

  • 若是shouldComponentUpdate(nextProps, nextState)返回false, 那么componentDidUpdate(prevProps, prevState)不会被触发;

8 componentWillUnmount()

• 执行场景

  • 在组件卸载(unmounted)或销毁(destroyed)以前

• 解释

  • 这个方法可让你处理一些必要的清理操做，好比无效的timers、interval，或者取消网络请求，或者清理任何在componentDidMount()中建立的DOM元素(elements);

相关 setState(Object/Function)

• 解释

  • 经过事件(event handlers)或服务请求回调(server request callbacks), 触发UI更新(re-render);

• 参数

  • 1 能够是Object类型, 这时是异步的setState, 同时接收一个在state发生改变以后的回调, 如this.setState(Object, callback), 其中callback能够是() => { ... this.state ... };

  • 2 能够是Function类型, 这时是同步的setState, 例如: (prevState, prevProps) => nextState, 同步存在必定效率问题(不理解), 可是它有一个好处就是支持Immutable;

二 两种生命周期

1 组件初始化

• 缘由

  • 组件第一次创建

• 触发

  • componentWillMount -> render -> componentDidMount

2 组件更新 -- props change

• 缘由

  • props发生改变

• 触发

  • componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> componentDidUpdate

3 组件更新 -- state change

• 缘由

  • this.setState()使state发生改变

• 触发

  • shoudlComponentUpdate -> componentWillUpdate -> componentDidUpdate

4 组件卸载或销毁

• 缘由

  • 组件卸载或销毁

• 触发

  • componentWillUnmount

三 相关连接

• 1 Facebook: State and Lifecycle of React

• 2 在React.js中使用PureComponent的重要性和使用方式

• 3 React 经常使用面试题目与分析

• 4 React入门教程 - 组件生命周期