React 的生命周期方法分为几个阶段,每个阶段都有一些特定的生命周期方法。以下是React组件生命周期方法的概述:
创建阶段:
-
构造函数(Constructor):
- 默认情况下,这是生命周期中的第一个方法。
- 用于初始化组件的状态(this.state)和绑定事件处理函数。
-
静态方法
getDerivedStateFromProps
(仅限类组件):- 在组件渲染之前调用。
- 用于从props派生状态。
-
钩子
constructor
(仅限函数组件):- 用于初始化函数组件,可以替代类组件的构造函数。
挂载阶段:
-
钩子
componentDidMount
(仅限类组件):- 在组件挂载到DOM后立即调用。
- 通常用于执行那些需要DOM的操作,如获取服务器数据。
-
钩子
useEffect
(仅限函数组件):- 用于在组件挂载后执行副作用操作。
- 可以接受一个清理函数作为第二个参数,用于在组件卸载前执行清理工作。
更新阶段:
-
静态方法
getDerivedStateFromProps
(仅限类组件):- 在组件接收到新的props后调用。
- 用于根据props更新state。
-
钩子
useEffect
(仅限函数组件):- 当组件的props或state发生变化时调用。
- 类似于类组件中的
componentDidUpdate
。
-
钩子
useLayoutEffect
(仅限函数组件):- 和
useEffect
类似,但在浏览器布局和绘制阶段同步调用。 - 用于操作DOM,如测量或读取布局。
- 和
-
钩子
useLayoutEffect
(仅限类组件):- 类组件的版本,与函数组件的
useLayoutEffect
相同。
- 类组件的版本,与函数组件的
-
方法
shouldComponentUpdate
(仅限类组件):- 在组件更新前被调用。
- 用于确定是否需要进行渲染。
- 从React 16.0之后,
PureComponent
也使用了这个生命周期方法,它会自动比较props和state来决定是否更新。
卸载阶段:
-
钩子
useEffect
(仅限函数组件):- 和
useEffect
一样,但在组件卸载前执行清理工作。
- 和
-
方法
componentWillUnmount
(仅限类组件):- 在组件即将卸载和销毁之前调用。
- 用于执行清理操作,如取消订阅、定时器等。