前端React篇之React的生命周期有哪些？

最新推荐文章于 2025-07-03 11:43:38 发布

原创

最新推荐文章于 2025-07-03 11:43:38 发布 · 3.1k 阅读

44 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react.js #前端框架

本文详细介绍了React组件的生命周期，包括挂载阶段的构造函数、渲染方法和组件挂载后操作，更新阶段的props变化处理，卸载阶段的清理工作，以及新引入的错误处理方法。这些方法对优化性能和管理组件状态至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React的生命周期有哪些？

请添加图片描述

在React中，组件的生命周期经历了不同阶段，每个阶段都有对应的生命周期方法。以下是React 16版本之后的组件生命周期方法：

挂载阶段（Mounting）：
- constructor(props)：组件的构造函数，在创建组件时调用，用于初始化状态和绑定事件处理方法。
- static getDerivedStateFromProps(props, state)：在组件实例化时和接收新的props时调用，用于根据props更新state。
- render()：准备渲染组件的UI结构。
- componentDidMount()：组件第一次渲染完成后调用，通常用于执行一次性的操作，如数据获取、订阅事件等。
更新阶段（Updating）：
- static getDerivedStateFromProps(props, state)：在组件接收新的props时调用，用于根据新的props更新state。
- shouldComponentUpdate(nextProps, nextState)：决定组件是否需要重新渲染，可以通过返回false来阻止不必要的渲染。
- render()：重新渲染组件的UI结构。
- getSnapshotBeforeUpdate(prevProps, prevState)：在最近一次渲染输出（提交到 DOM 上）之前调用，可以用于获取当前 DOM 的快照信息。
- componentDidUpdate(prevProps, prevState, snapshot)：组件更新完成后调用，通常用于处理更新后的操作，如数据同步、DOM 操作等。
卸载阶段（Unmounting）：
- componentWillUnmount()：组件即将被卸载和销毁时调用，用于清理定时器、取消订阅等操作。
错误处理阶段（Error Handling）：
- static getDerivedStateFromError(error)：当子组件抛出错误时调用，用于更新组件的state以渲染降级 UI。
- componentDidCatch(error, info)：用于捕获组件内部的 JavaScript 错误、网络请求失败等异常情况，并进行错误处理。
新的生命周期方法（可选）：
- static getDerivedStateFromError(error) 和 componentDidCatch(error, info) 是 React 16 引入的新的错误处理生命周期方法。

这些生命周期方法在组件的不同阶段被调用，开发者可以利用这些方法来管理组件的状态、执行特定的操作或者处理错误。值得注意的是，随着React版本的更新，一些生命周期方法可能会被废弃或者替代，因此在使用时需要留意官方文档的更新。

挂载阶段（Mounting）

在React组件的挂载阶段（Mounting Phase）中会依次执行以下方法：

constructor(props)：
- 构造函数，在创建组件时调用，用于初始化状态和绑定事件处理方法。
- 在构造函数中通常做两件事情：初始化组件的状态和绑定事件处理方法。
- 如果不需要初始化state或绑定方法，则不需要显式定义构造函数。
static getDerivedStateFromProps(props, state)：
- 静态方法，用于根据props更新state。
- 在组件实例化时和接收新props时调用，返回一个对象来更新当前state，如果不需要更新可以返回null。
- 在React 16.4版本及以上，setState和forceUpdate也会触发该生命周期方法。