ReactJS - 组件生命周期

你好，未来的React开发者们！今天，我们将踏上一段激动人心的旅程，探索React组件的生命周期。如果你是编程新手，不用担心——我会成为你的友好向导，一步步解释所有内容。在本教程结束时，你将能够牢固地理解React组件是如何诞生、成长，最终说再见的。让我们开始吧！

组件生命周期是什么？

在我们跳入代码之前，让我们先讨论一下“生命周期”的含义。就像我们人类经历不同的生命阶段（出生、成长，以及，你知道的...），React组件也有它们自己的生命周期。这些阶段被称为组件生命周期。

将React组件想象成一只虚拟宠物。当你第一次创建它时，它就诞生了。然后它会在你与它的互动中成长和变化。最后，当你不再需要它时，它就会消失。理解这个生命周期对于创建动态和高效的React应用程序至关重要。

组件生命周期的三个主要阶段

React组件经历三个主要阶段：

1. 挂载（出生）
2. 更新（成长）
3. 卸载（告别）

让我们探讨每个阶段以及与之关联的方法。

1. 挂载阶段

这是我们的组件诞生并被添加到DOM（文档对象模型——可以将其视为你的网页的家谱树）的时候。

这个阶段的关键方法：

方法	描述
constructor()	组件的构造函数，在挂载之前被调用
render()	实际渲染组件的方法
componentDidMount()	组件挂载到DOM后调用

让我们看一个简单的例子：

import React, { Component } from 'react';

class BabyComponent extends Component {
constructor(props) {
super(props);
this.state = { message: "我刚刚出生！" };
console.log("构造函数：你好，我正在被创建！");
}

componentDidMount() {
console.log("componentDidMount: 我现在在DOM中！");
}

render() {
console.log("Render: 我正在被渲染！");
return <h1>{this.state.message}</h1>;
}
}

export default BabyComponent;

在这个例子中，我们的BabyComponent经历了出生阶段。首先调用constructor，设置初始状态。然后调用render创建实际的DOM元素。最后，componentDidMount被调用，表示我们的组件已经完全出生并添加到DOM中。

2. 更新阶段

当组件的状态改变或接收到新的props时，会发生这个阶段。

这个阶段的关键方法：

方法	描述
shouldComponentUpdate()	决定是否应该重新渲染组件
render()	使用更新后的数据重新渲染组件
componentDidUpdate()	组件更新后调用

让我们扩展之前的例子：

import React, { Component } from 'react';

class GrowingComponent extends Component {
constructor(props) {
super(props);
this.state = { age: 0 };
}

componentDidMount() {
this.ageInterval = setInterval(() => {
this.setState(prevState => ({ age: prevState.age + 1 }));
}, 1000);
}

shouldComponentUpdate(nextProps, nextState) {
return nextState.age % 5 === 0; // 每5年更新一次
}

componentDidUpdate() {
console.log(`我刚刚过了${this.state.age}岁！`);
}

render() {
return <h1>我今年{this.state.age}岁了</h1>;
}

componentWillUnmount() {
clearInterval(this.ageInterval);
}
}

export default GrowingComponent;

在这个例子中，我们的GrowingComponent每秒“长大”一岁。shouldComponentUpdate方法确保我们只在每5年庆祝一次生日（为了节省蛋糕，你知道的）。当组件更新时，componentDidUpdate会记录一条生日信息。

3. 卸载阶段

这是组件从DOM中移除的告别阶段。

这个阶段的关键方法：

方法	描述
componentWillUnmount()	在组件卸载并销毁之前调用

在我们的GrowingComponent示例中，我们使用componentWillUnmount来清除我们设置的定时器，防止内存泄漏。

生命周期API的工作示例

现在，让我们将这些内容结合起来，在一个更复杂的例子中。我们将创建一个简单的“情绪追踪器”应用程序，演示所有生命周期方法。

import React, { Component } from 'react';

class MoodTracker extends Component {
constructor(props) {
super(props);
this.state = { mood: 'neutral', intensity: 5 };
console.log('构造函数：情绪追踪器正在被创建');
}

componentDidMount() {
console.log('ComponentDidMount: 情绪追踪器现在在DOM中');
this.moodInterval = setInterval(() => {
const moods = ['happy', 'sad', 'excited', 'nervous', 'neutral'];
const newMood = moods[Math.floor(Math.random() * moods.length)];
this.setState({ mood: newMood });
}, 5000);
}

shouldComponentUpdate(nextProps, nextState) {
return this.state.mood !== nextState.mood;
}

componentDidUpdate() {
console.log(`情绪更新为：${this.state.mood}`);
}

componentWillUnmount() {
console.log('ComponentWillUnmount: 再见情绪追踪器！');
clearInterval(this.moodInterval);
}

handleIntensityChange = (e) => {
this.setState({ intensity: e.target.value });
}

render() {
console.log('Render: 情绪追踪器正在渲染');
return (
<div>
<h1>当前情绪：{this.state.mood}</h1>
<input
type="range"
min="1"
max="10"
value={this.state.intensity}
onChange={this.handleIntensityChange}
/>
<p>强度：{this.state.intensity}</p>
</div>
);
}
}

export default MoodTracker;

这个MoodTracker组件演示了我们已经讨论过的所有生命周期方法。它每5秒随机改变一次情绪，并允许用户调整情绪强度。

生命周期API在Expense Manager应用中的使用

现在，让我们考虑一下我们如何在像Expense Manager这样的实际应用程序中使用这些生命周期方法。

import React, { Component } from 'react';

class ExpenseManager extends Component {
constructor(props) {
super(props);
this.state = { expenses: [], total: 0 };
}

componentDidMount() {
// 模拟从API获取支出
setTimeout(() => {
const fetchedExpenses = [
{ id: 1, description: '杂货', 金额: 50 },
{ id: 2, description: '汽油', 金额: 30 },
{ id: 3, description: '电影票', 金额: 20 },
];
this.setState({ expenses: fetchedExpenses }, this.calculateTotal);
}, 1000);
}

shouldComponentUpdate(nextProps, nextState) {
// 只有当总额改变时才更新
return this.state.total !== nextState.total;
}

componentDidUpdate() {
console.log(`总支出更新：$${this.state.total}`);
}

calculateTotal = () => {
const total = this.state.expenses.reduce((sum, expense) => sum + expense.amount, 0);
this.setState({ total });
}

render() {
return (
<div>
<h1>支出管理器</h1>
<ul>
{this.state.expenses.map(expense => (
<li key={expense.id}>{expense.description}: ${expense.amount}</li>
))}
</ul>
<h2>总额：${this.state.total}</h2>
</div>
);
}
}

export default ExpenseManager;

在这个ExpenseManager组件中：

1. 我们使用componentDidMount来模拟在组件首次加载时从API获取支出数据。
2. shouldComponentUpdate确保我们只在总额改变时重新渲染，而不是每次小更新。
3. componentDidUpdate在总额改变时记录新的总额。

通过利用这些生命周期方法，我们创建了一个更高效和响应迅速的支出跟踪应用程序。

理解组件生命周期对于构建高效的React应用程序至关重要。它允许你控制特定动作的发生时间，优化性能，以及有效管理资源。继续练习这些概念，不久你将能够轻松创建复杂、动态的React应用程序！

Credits: Image by storyset