学习笔记——React lifecycle

ref: https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d

概述

初学React,经常会遇到一些与生命周期有关的问题， 比如我的请求在哪个阶段发送合适，每个生命周期会在什么时候触发， 带着一系列的疑问，我开始翻阅官方文档，期待解决以下问题：
（1）React每个lifecycle 的执行顺序是什么。
（2）每个 生命周期何时会被触发。
（3）不同生命周期方法的输入，输出是什么。
（4）每个生命周期的使用场景。

生命周期图解

React在16.3版本中对生命周期方法进行了较大的改动， 标记了三个Unsafe lifecycle: 这三个生命周期被标记成unsafe是因为现在经常被人们乱用，React想在接下来的发展中引入异步render， 这将会引入更多bugs.所以会逐渐被替换掉， 16.3版本中加入了UNSAFE前缀作为别名，两个名字都可以用。16.x版本中两者也都可以用，但是当使用没有前缀的版本时会有warning。17.0 版本中将会彻底移除旧的版本。即：

• UNSAFE_componentWillMount()
• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

16.3版本之前的图解

ReactJS-components-life-cycle1.png

16.3 版本之后的图解

react-lifecycle.jpg

注： 图片均来自网络
改版前后的React生命周期分别如图所示：
从图中可以看出，React将生命周期定义为三个阶段，分别是Mounting（挂载），re-rendering（更新）和 Unmounting（卸载）。其中卸载的过程很简单，都会调用componentWillUnmount（）方法，故本文不做介绍，将着重介绍Mounting和re-rendering的流程。
Mounting个过程是在组件初始化的流程，所以其中的生命周期只会执行一次。
re-rendering的过程会根据出发更新的条件不同，经历不同的生命周期。

Mounting过程

react-lifecycle-mounting.jpg

Re-rendering过程

Props Change

react-lifecycle-props-change.jpg

State Change

react-lifecycle-forceUpdate.jpg

forceUpdate

react-lifecycle-state-change.jpg

接下来将重点介绍不同的方法的使用场景和注意事项：

• constructor
  • 用于初始化内部状态, 且是唯一一个可以直接修改state的地方 （this.state = , 其余地方都是直接this.setState() ）.
  • 初始化component中的字段和 bind functions。
  • 不要造成任何副作用 (如AJAX 请求等)
• static getDerivedStateFromProps(nextProps, prevState)
  • 当state需要从props初始化时使用。
  • 尽量不要使用，维持两者状态一致性会增加复杂度。
  • 每次render 都会调用，即component created 和update时都会调用。
  • 可以用于替换component WillReceiveProps。
  • 典型场景：表单控制获取默认值。
• ComponentDidMount：，
  • 在组件加载完毕之后立即执行， 且只在Mounting阶段执行一次。
  • 典型场景： 获取外部资源， 如发送AJAX请求。
  • 不要调用this.setState 方法，因为会导致re-render。
• ComponentWillUnmount
  • 组件移除时调用，可以移除创建的定时器，监听器等。
  • 典型场景：释放资源，如定时器。
• getSnapshotBeforeUpdate(prevProps, prevState)
  • 在页面render之前调用， state已经更新。
  • 典型场景：获取render之前的Dom状态。
• ComponentDidUpdate(prevProps, prevState, prevContext)：
  • 在组件每次re-render时当render完成后立即执行，初始化时不会执行
  • 不要造成任何副作用 (如AJAX 请求等)
  • don't not call this.setState , 因为会re-render。
  • 典型场景：页面需要根据props变化重新获取数据。
• shouldComponentUpdate(nextProps, nextState, nextContext)
  • 决定Virtual Dom是否要重画
  • 一般可以有PureComponent 自动实现（判断当前的props或state和之前的有什么变化，如果没有变化就不会重画）
  • 典型场景：性能优化（自己可以决定什么时候需要更新）
  • 不要造成任何副作用 (如AJAX 请求等)
  • 不要 call this.setState()
• componentDidCatch(errorString, errorInfo)
  • 可以得到子component在渲染过程中产生的错误。
  • errorString — the .toString() message of the error
  • errorInfo — an object with a single field componentStack which represent the stack trace back to where the error occured.
• componentWillMount:
  • update state via this.setState
  • perform last minute optimization
  • cause side-effects (AJAX calls etc.) in case of server-side-rendering only
  • Don't ause any side effects (AJAX calls etc.)
• componentWillReceiveProps(nextProps)
  • sync state to props
  • don't cause any side effects (AJAX calls etc.)
• componentWillUpdate(nextProps, nextState)
  • shouldComponentUpdate 返回true或者是forceUpdate() 时被调用
  • synchronize state to props
  • don't cause any side effects(AJAX calls etc