正确掌握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,那么componentDidUpdate(prevProps,prevState)不会被触发;