【React系列一】初学 React:从 JSX 到组件运用 - 掘金 (juejin.cn)
【React系列二】React中组件通信的几种方式 - 掘金 (juejin.cn))
什么是 React 组件生命周期?
React 组件生命周期指的是组件从创建、渲染到销毁的整个过程。在这个过程中,React 组件经历了不同的阶段,并在每个阶段执行特定的生命周期方法。
这些方法帮助开发人员在组件的不同生命周期阶段执行特定的操作,如初始化状态、发送网络请求、处理用户交互等。
常用的生命周期
不常用的生命周期
组件生命周期的阶段
React 组件的生命周期可以分为三个主要阶段:
-
挂载阶段(Mounting) :组件被实例化并插入 DOM 中的过程。这个阶段包括以下生命周期方法:
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
-
更新阶段(Updating) :组件的 props 或 state 发生变化,导致组件重新渲染的过程。这个阶段包括以下生命周期方法:
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
-
卸载阶段(Unmounting) :组件从 DOM 中移除的过程。这个阶段只包含一个生命周期方法:
componentWillUnmount()
挂载阶段生命周期方法
在组件被实例化并插入 DOM 中时,以下生命周期方法被调用:
-
constructor(props)
- 构造函数,在组件创建时调用,用于初始化状态和绑定事件处理函数。
- 在构造函数中调用
super(props)
来调用父类的构造函数,并将 props 传递给父类。 - 初始化组件的状态可以通过
this.state = { }
实现。
-
static getDerivedStateFromProps(props, state)
- 当组件接收到新的 props 时调用,在渲染之前执行。
- 用于根据新的 props 计算并更新组件的状态。
- 应返回一个对象来更新状态,或者返回 null 来表示不需要更新状态。
-
render()
- 必需的生命周期方法,用于渲染组件的 UI。
- 应返回一个 React 元素,描述组件的输出。
- 不应该在这个方法中修改组件的状态或执行副作用操作。
-
componentDidMount()
- 在组件的初始渲染之后立即被调用的
- 通常在这个方法中执行一些初始化操作(比如发起网络请求、订阅事件、获取初始数据)
- 这个方法只会在组件的生命周期中被调用一次,因此适合进行一次性的初始化工作
代码示例 :
javascript
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
static getDerivedStateFromProps(props, state) {
// 在这里可以根据 props 计算并更新 state
return null;
}
componentDidMount() {
// 在组件挂载后执行一次性操作,比如发送网络请求
console.log('Component mounted');
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
</div>
);
}
}
export default MyComponent;
更新阶段生命周期方法
当组件的 props 或 state 发生变化,导致组件需要重新渲染时,以下生命周期方法被调用:
- shouldComponentUpdate(nextProps, nextState)
- 在组件接收到新的 props 或者 state 时被调用,在渲染之前执行。
- 可以根据新的 props 或者 state 决定是否需要重新渲染组件。
- 默认返回 true,表示组件将会重新渲染,可以通过返回 false 来阻止重新渲染,以提升性能。
- render()
- 必需的生命周期方法,用于渲染组件的 UI。
- 应返回一个 React 元素,描述组件的输出。
- 不应该在这个方法中修改组件的状态或执行副作用操作。
- getSnapshotBeforeUpdate(prevProps, prevState)
- 在最新的渲染输出被提交到 DOM 之前调用。
- 用于获取更新前的 DOM 快照或执行一些 DOM 操作。
- 返回的值将作为
componentDidUpdate
方法的第三个参数传递。
- componentDidUpdate(prevProps, prevState, snapshot)
- 在组件更新完成后立即调用。
- 通常用于执行一些副作用操作,比如更新后的 DOM 操作、发送网络请求等。
- 可以访问到更新之前的 props、state,以及通过
getSnapshotBeforeUpdate
返回的值。
javascript
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
shouldComponentUpdate(nextProps, nextState) {
// 在这里可以根据新的 props 和 state 判断是否需要重新渲染
return true;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// 在更新 DOM 之前获取当前 DOM 的快照或执行一些 DOM 操作
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
// 在组件更新后执行一些操作,比如更新后的 DOM 操作
console.log('Component updated');
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
</div>
);
}
}
export default MyComponent;
卸载阶段生命周期方法
在组件从 DOM 中移除时,以下生命周期方法被调用:
-
componentWillUnmount()
- 在组件即将被销毁并从 DOM 中移除之前调用。
- 用于执行一些清理工作,比如取消订阅、清除定时器等。
- 在这个方法中不能调用
setState
,因为组件即将被销毁。
javascript
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentWillUnmount() {
// 在组件被销毁前执行清理操作,比如取消订阅或清除定时器
console.log('Component will unmount');
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
</div>
);
}
}
export default MyComponent;
小结
PS: 希望本文能够帮助大家更深入地理解 React 组件的生命周期。
都看到这里了来个一键三连吧~