生命周期函数详解

React生命周期细

constructor(props)

• 类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作

• 初始化 state

• 处理事件绑定函数的 this

render()

render 方法是 Class 组件必须实现的方法

static getDerivedStateFromProps(props, state)

该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 state

componentDidMount()

在组件挂载后（render 的内容插入 DOM 树中）调用。通常在这个阶段，我们可以：

• 操作 DOM 节点
• 发送请求

shouldComponentUpdate(nextProps, nextState)

发生在更新阶段，getDerivedStateFromProps 之后，render 之前，该函数会返回一个布尔值，决定了后续是否执行 render，首次渲染不会调用该函数

getSnapshotBeforeUpdate(prevProps, prevState)

该方法在 render() 之后，但是在输出到 DOM 之前执行，用来获取渲染之前的快照。当我们想在当前一次更新前获取上次的 DOM 状态，可以在这里进行处理，该函数的返回值将作为参数传递给下个生命周期函数

componentDidUpdate

该函数并不常用。

componentDidUpdate()

该函数会在 DOM 更新后立即调用，首次渲染不会调用该方法。我们可以在这个函数中对渲染后的 DOM 进行操作

componentWillUnmount()

• 该方法会在组件卸载及销毁前调用，我们可以在这里做一些清理工作，如：组件内的定时器、未完成的请求等

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法

• static getDerivedStateFromError()
• componentDidCatch()