React 组件生命周期方法速查表

React 中的每个组件都有一个生命周期，你可以对其进行监控和操作。

生命周期说明：

• 挂载：在组件显示在用户界面之前调用。
• 更新：由于属性或状态发生变化，导致 UI 重新渲染。
• 卸载：当您的用户界面不再显示该组件时调用。

安装

构造函数

• 生命周期：在渲染前立即挂载。
• 目的：初始化状态。

// Commonly Used Lifecycle Methods
constructor() {

}

组件挂载

• 生命周期：渲染完成后立即挂载。
• 目的：初始化需要 DOM 节点、网络请求和副作用的状态。

componentDidMount() {

}

正在更新

shouldComponentUpdate

• 生命周期：在渲染前立即更新。
• 用途：允许开发者阻止渲染。

shouldComponentUpdate(nextProps, nextState) { // Optional Parameters

}

使成为

用于显示组件的代码。

// Required
render() {

}

获取更新前的快照

• 生命周期：在渲染输出提交到 DOM 之前立即更新。
• 目的：捕获 DOM 信息，例如滚动位置，这些信息可能会发生变化。

getSnapshotBeforeUpdate(prevProps, prevState) { // Optional Parameters

}

componentDidUpdate

• 生命周期：渲染完成后立即更新。
• 目的：操作更新后的 DOM 或处理网络请求。

componentDidUpdate(prevProps, prevState, snapshot) { // Optional Parameters

}

安装和更新

从属性获取派生状态

• 生命周期：在渲染前立即挂载和更新。
• 目的：当你的状态依赖于 props 时（应该避免）。

// Rarely Used Lifecycle Methods
static getDerivedStateFromProps(props, state) { // Optional Parameters

}

卸载

componentWillUnmount

• 生命周期：卸载。
• 目的：清理事件处理程序、取消网络请求等。

componentWillUnmount() {

}

其他方法

componentDidCatch

创建错误边界以捕获子组件中的错误。

// Special Use Cases
componentDidCatch(error, info) { // Optional Parameters

}

参考

React.Component - React

感谢阅读❤ 欢迎关注！Github | LinkedIn | Twitter