react-组件生命周期

一、生命周期阶段

官方文档：https://zh-hans.legacy.reactjs.org/docs/react-component.html

React组件生命周期可分为三个阶段：挂载、更新、卸载

• 挂载：当组件实例被创建并插入 DOM 中时。其生命周期调用顺序如下：

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

• 更新：当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

• 卸载：当组件从 DOM 中移除时

  • componentWillUnmount()

组件生命周期图谱：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

• 常用生命周期图谱：

• 完整生命周期图谱：

二、常用生命周期方法

方法	触发时机	作用	说明
constructor()	组件挂载之前，会调用它的构造函数	1、初始化state 2、为事件处理程序绑定实例	如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数
render()	每次组件渲染都会触发	渲染UI	1、render() 方法是 class 组件中唯一必须实现的方法 2、render() 方法必须有返回值
componentDidMount()	组件挂载后（插入 DOM 树中）立即调用	1、发送网络请求 2、DOM操作	这个方法是比较适合添加订阅的地方
componentDidUpdate()	更新后会被立即调用	1、发送网络请求 2、DOM操作	1、如果这里要调用 setState()，必须放在一个如 if 的条件语句中，否则会导致死循环 2、语法：componentDidUpdate(prevProps, prevState, snapshot)
componentWillUnmount()	组件卸载及销毁之前直接调用	执行清理工作（如：移除监听、清理定时器、取消订阅等）

三、不常用生命周期方法

方法	触发时机	作用	说明
shouldComponentUpdate()	当 props 或 state 发生变化时，在 render() 执行之前被调用	判断 React 组件的输出是否受当前 state 或 props 更改的影响	1、返回布尔值，默认 true 2、语法：shouldComponentUpdate(nextProps, nextState) 3、此方法仅作为性能优化的方式而存在
getDerivedStateFromProps()	在调用 render() 之前调用，并且在初始挂载及后续更新时都会被调用	此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props	1、返回一个对象来更新 state，如果返回 null 则不更新任何内容 2、语法：static getDerivedStateFromProps(props, state) 3、此方法无权访问组件实例
getSnapshotBeforeUpdate()	在最近一次渲染输出（提交到 DOM 节点）之前调用	它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）	1、返回 snapshot 的值（或 null） 2、语法：getSnapshotBeforeUpdate(prevProps, prevState)

此外，涉及错误边界的两个方法getDerivedStateFromError()和componentDidCatch()请参考官方文档