Reactjs 生命周期类组件

在Reactjs中，类组件是拥有生命周期方法的。这些生命周期方法可以在组件的不同阶段执行，从而允许开发人员在这些阶段添加适当的逻辑。

生命周期图示

以下是React的类组件生命周期方法：

Mounting （装载阶段）

这些方法在组件被创建，插入到DOM中时被调用。

• constructor(props)：组件被创建时调用，其中的props是组件所接收的属性。
• static getDerivedStateFromProps(props, state)：在渲染之前调用并返回一个值，这个值将作为组件的新状态。
• render()：在constructor和getDerivedStateFromProps之后调用，返回组件显示的内容。
• componentDidMount()：在组件被插入到DOM中后调用，可以进行DOM操作等后续操作。

Updating （更新阶段）

这些方法在组件的props或state被更新时被调用。

• static getDerivedStateFromProps(props, state)：在渲染之前调用并返回一个值，这个值将作为组件的新状态。
• shouldComponentUpdate(nextProps, nextState)：在渲染之前调用，返回一个布尔值，表示组件是否需要更新。默认是true，可以在这个方法中进行判断。
• render()：在shouldComponentUpdate之后调用，返回组件显示的内容。
• getSnapshotBeforeUpdate(prevProps, prevState)：在组件更新之前调用并返回一个值，将作为componentDidUpdate方法中的第三个参数传入。
• componentDidUpdate(prevProps, prevState, snapshot)：在组件更新后调用，可以进行DOM操作等后续操作。

Unmounting （卸载阶段）

这个方法在组件被销毁时被调用。

• componentWillUnmount()：在组件被销毁时调用，可以清除组件中的定时器、事件监听等工作。

Error Handling （错误处理阶段）

这个方法在组件抛出错误时被调用。

• componentDidCatch(error, info)：在组件抛出错误时调用，可以进行错误信息的记录和展示等操作。

以上就是React的生命周期方法，通过这些方法可以更好地掌控组件的不同阶段的行为，并实现一些需要在特定阶段添加的逻辑。