在学习 React 时，理解组件的生命周期非常重要。组件生命周期指的是组件从创建到销毁的整个过程。React 提供了多种生命周期方法来帮助开发者在特定的时刻执行某些代码。
1. 组件的生命周期阶段
React 组件的生命周期通常分为三个主要阶段：
- 挂载（Mounting）：组件被创建并插入到 DOM 中。
- 更新（Updating）：组件的 props 或 state 发生变化，会触发更新。
- 卸载（Unmounting）：组件从 DOM 中移除。
2. 挂载阶段的生命周期方法
在组件进入 DOM 时，以下生命周期方法会被调用：
constructor(props)static getDerivedStateFromProps(props, state)render()componentDidMount()
2.1 constructor(props)
constructor 是组件的构造函数，在组件创建时被调用，是初始化 state 和绑定事件处理程序的理想场所。
1
2
3
4
5
6
| class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
}
|
2.2 static getDerivedStateFromProps(props, state)
这是一个静态方法，当组件接收到新的 props 时，会被调用。可以返回一个对象来更新 state，或者返回 null 表示不需要更新。
1
2
3
4
5
6
7
8
9
10
| class MyComponent extends React.Component {
state = { count: 0 };
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.count !== prevState.count) {
return { count: nextProps.count };
}
return null;
}
}
|
2.3 render()
render() 方法是必需的，它返回要渲染的 JSX。
1
2
3
| render() {
return <div>Count: {this.state.count}</div>;
}
|
2.4 componentDidMount()
在组件首次挂载后立即调用。常用于进行网络请求或订阅。
1
2
3
4
| componentDidMount() {
console.log('Component did mount');
}
|
3. 更新阶段的生命周期方法
当组件的 state 或 props 更改时，以下方法会被调用：
static getDerivedStateFromProps(props, state)shouldComponentUpdate(nextProps, nextState)render()getSnapshotBeforeUpdate(prevProps, prevState)componentDidUpdate(prevProps, prevState, snapshot)
3.1 shouldComponentUpdate(nextProps, nextState)
此方法用于控制组件是否应该更新。返回 true 则更新，返回 false 则不更新。
1
2
3
| shouldComponentUpdate(nextProps, nextState) {
return this.state.count !== nextState.count;
}
|
3.2 getSnapshotBeforeUpdate(prevProps, prevState)
在更新前立即调用，可以用于保存某些信息，例如滚动位置，并在 componentDidUpdate 中使用。
1
2
3
4
5
6
7
8
| getSnapshotBeforeUpdate(prevProps, prevState) {
return window.scrollY;
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('Scroll position:', snapshot);
}
|
3.3 componentDidUpdate(prevProps, prevState, snapshot)
在组件更新后立即调用。可以用来进行操作，例如基于新的 props 进行数据获取。
1
2
3
4
5
| componentDidUpdate(prevProps, prevState) {
if (this.props.userId !== prevProps.userId) {
}
}
|
4. 卸载阶段的生命周期方法
当组件从 DOM 中移除时会调用以下方法：
4.1 componentWillUnmount()
在组件卸载和销毁之前立即调用。这是清理订阅或定时器的理想场所。
1
2
3
4
| componentWillUnmount() {
console.log('Component will unmount');
}
|
5. 代码示例
综合以上方法，以下是一个完整的示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.seconds !== prevState.seconds) {
return { seconds: nextProps.seconds };
}
return null;
}
componentDidMount() {
this.interval = setInterval(() => {
this.setState((prevState) => ({ seconds: prevState.seconds + 1 }));
}, 1000);
}
componentDidUpdate(prevProps) {
if (this.props.seconds !== prevProps.seconds) {
}
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return <div>Seconds: {this.state.seconds}</div>;
}
}
|
在此示例中，我们创建了一个计时器组件，展示了如何在不同生命周期方法中处理数据和操作。
6. 小结
掌握 React 的组件生命周期方法是开发高效和可维护应用程序的关键。通过合理地使用这些方法，开发者可以有效地管理组件的行为。
