React 生命周期

概述

生命周期图谱

React 16.4 及以后的生命周期图谱如图。

挂载阶段

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

更新阶段

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

卸载阶段

• componentWillUnmount()

错误处理

• static getDerivedStateFromError()
• componentDidCatch()

一个 Demo

生命周期方法

render()

是 class 组件中唯一必须实现的方法，当被调用时，会检查this.props与this.state的变化并返回

• React 元素
• 数组
• fragments
• Portals
• 字符串或数值（会被渲染为文本节点）
• 布尔类型或 null，什么都不渲染（主要是为了支持test && <A />之类的形式）

render()应为纯函数

constructor()

一般仅用于实现：

• 通过对this.state赋值初始化内部 state
• 为事件处理函数绑定实例（this.func = this.func.bind(this)）

componentDidMount()

依赖于 DOM 节点的初始化的部分在此处实现，如网络请求等

componentDidUpdate(prevProps, prevState, snapshot)

组件更新后，可通过prevProps, prevState等进行网络请求等

snapshot参数若在实现getSnapshotBeforeUpdate()的情况下为其返回值，否则为undefined

shouldComponentUpdate(nextProps, nextState)

其返回值决定生命周期图谱中new Props与setState引发的更新阶段中render以后是否执行，返回false不会阻止子组件在 state 更改时重新渲染。

此方法主要用于性能优化。

static getDerivedStateFromProps(props, state)

此方法让组件在 props 变化时更新 state。其返回一个对象来更新state，若返回null则不更新。

getSnapshotBeforeUpdate(prevProps, prevState)

此方法让组件发生更改之前从 DOM 中捕获一些信息。

static getDerivedStateFromError(error)

此生命周期会在后代组件抛出错误后调用。