react的生命周期

react 16.3版本之后的生命周期

React v16.3新生命周期浅谈

React v15到v16.3, v16.4新生命周期总结以及使用场景

前言

React 官方正式发布了 v16.3 版本。在这次的更新中，除了前段时间被热烈讨论的新 Context API 之外，新引入的两个生命周期函数 getDerivedStateFromProps，getSnapshotBeforeUpdate 以及在未来 v17.0 版本中即将被移除的三个生命周期函数 componentWillMount，componentWillReceiveProps，componentWillUpdate

总述

带有will的都是在动作发生前执行，带有did的都是在动作发生之后执行。然后再记住几个关键词：mounting，updating，unmounting，error handling。

Mounting阶段

1. constructor()
   constructor方法在组件建立前被调用。
   在这个方法里面，应该先调用super(props)，否则this.props就会未定义。
   这个方法的主要用途是，初始化props，state和绑定方法。
   如果在里面用props为state赋值，那么最好把state提升，也可以在getDerivedStateFromProps()里面用props为state赋值。

2. static getDerivedStateFromProps()
   在下列三种情况下，会调用getDerivedStateFromProps方法：

• 组件实例化。
• 组件的props发生变化。
• 父组件重新渲染。

this.setState()不会触发getDerivedStateFromProps()，但是this.forceUpdate()会。

3. UNSAFE_componentWillMount()
   这个方法在render方法执行前被调用。官方不建议用这个方法，所以给它加了一个UNSAFE前缀。官方建议把要在这里面写的内容放到constructor()或者componentDidMount()里面。
   另外，这个方法是唯一的服务端渲染钩子。

4. render()
   当调用render的时候，组件会检查props和state并返回下列类型中的一个：
   react元素。
   字符串或者数字。
   Portals。
   null。(不渲染)
   Booleans。(不渲染)
   react.Fragment。

5. componentDidMount()
   这个方法会在组件建立之后立即调用。需要DOM节点的初始化应该放在这里。
   需要注意的是，在这里调用setState()会发生第二次render，但是这第二次render会发生在浏览器渲染之前，所以用户往往看不到第二次渲染，即使这样，也要小心使用 这个方法，因为它会造成性能问题。

Update阶段

1. UNSAFE_componentWillReceiveProps()
   在下列三种情况下，会调用UNSAFE_componentWillReceiveProps方法，但是官方不建议使用这个方法，
   组件的props发生改变。
   父组件发生重新渲染。
   需要注意的是，在初始化props的时候并不会
   调用这个方法，this.setState()也不会触发这个方法。

   官方建议使用static getDerivedStateFromProps方法。
   static getDerivedStateFromProps
   在update阶段也会调用一次这个方法。

2. shouldComponentUpdate()
   这个方法的默认行为是每当state发生改变的时候就重新渲染组件。
   当初始化的时候，这个方法不会被调用，当使用forceUpdate()的时候，这个方法也不会调用。
   如果要提升性能的话，建议使用React.PureComponent，它在shouldComponentUpdate()的默认行为中使用了浅比较。你也可以在里面自己写比较方法。

3. UNSAFE_componentWillUpdate()
   这个方法会在接受新props和state之后调用。官方不建议在里面调用setState()，要使用的话，建议在getDerivedStateFromProps方法里面使用。

4. render()
   在update阶段也会调用一次这个方法。

5. getSnapshotBeforeUpdate()
   这个方法会在把渲染结果提交到DOM之前被调用。它可以返回一个参数，这个参数被componentDidUpdate(prevProps, prevState, snapshot)方法的第三个参数接收。

6. componentDidUpdate()
   这个方法会在组件更新前被调用，所以最好在这里面操作DOM。

unmounting阶段

1. componentWillUnmount
   这个方法会在组件被销毁时调用，所以在这里面做一些必要的清理，比如计时器，网络请求，订阅等等。

Error阶段

1. componentDidCatch()
   这个方法在组件catch到各种error之后调用，并进行处理。不要在里面改变数据流，它也不能处理本身抛出的错误。