实用指南：React组件生命周期节点触发时机（组件加载Mount、组件更新Update、组件卸载Unmount）组件挂载

文章目录

• React 组件的“生命周期”通俗讲解
• • 一、加载阶段（Mount）
  • • 什么时候发生？
    • 类组件的生命周期钩子：
    • 函数组件 + Hooks：
  • 二、更新阶段（Update）
  • • 那这些“变化”怎么来的？（用户是怎么触发的）
    • 类组件示例
    • 函数组件示例
    • **用户触发更新的具体例子：**
  • 三、卸载阶段（Unmount）
  • • 类组件：
    • 函数组件：
    • 那用户是怎么触发卸载的呢？
  • 一个完整的流程图
  • 生命周期与用户行为总结图
  • 举个实际的小例子
  • 总结表
  • 写在最后

React 组件的“生命周期”通俗讲解

想象一下，一个 React 组件就像你养的一只小宠物：
它出生（加载） → 成长（更新） → 离开（卸载）。
React 会在这三个阶段自动帮你做一些事，而你也可以在不同阶段去“插手”处理逻辑。

---

一、加载阶段（Mount）

加载，也叫“挂载”。
就是组件第一次被放进页面里、第一次显示在屏幕上的时候。

什么时候发生？

• 你在父组件里写了 <Child />
• React 需要把这个组件渲染到真实的 DOM 上

用户操作触发示例：

这些行为都可能导致组件第一次挂载：

• 切换路由页面（如从 /home 跳到 /about，React Router 会加载新页面组件）
• 点击按钮 显示某个子组件（例如点击“展开详情”按钮后才渲染 <Detail />）
• 条件渲染出现（{show && <Modal />} 从 false 变成 true）

换句话说：只要某个组件第一次出现在页面上，就会经历挂载阶段。

类组件的生命周期钩子：

class Example extends React.Component {
componentDidMount() {
console.log("组件挂载完成！");
}
render() {
return <div>你好，我刚出生 </div>;}}

componentDidMount 会在组件挂载后执行。
常用于：

• 请求接口数据（fetch）
• 操作 DOM
• 启动计时器等副作用

函数组件 + Hooks：

import { useEffect } from "react";
function Example() {
useEffect(() => {
console.log("组件挂载完成！");
}, []); // 依赖数组为空 → 只在第一次执行
return <div>你好，我刚出生 </div>;}

---

二、更新阶段（Update）

更新，就是组件因为数据变化而重新渲染。
可能的触发原因包括：

• 组件自己的 state 改变
• 父组件传来的 props 改变
• 上层重新渲染导致子组件也被迫更新

那这些“变化”怎么来的？（用户是怎么触发的）

React 组件的更新几乎都来自用户操作或外部数据变化，比如：

• 用户在输入框里输入内容，触发 setState 更新
• 点击按钮修改状态，例如 setCount(count + 1)
• 父组件更新了 props（比如父组件的 state 变化）
• 后端请求返回新数据后更新状态
• 定时器定期改变数据（如计时器）

每次组件的 state 或接收到的 props 改变，React 就会执行“更新阶段”的逻辑。

类组件示例

class Example extends React.Component {
componentDidUpdate(prevProps, prevState) {
console.log("组件更新了！");
}
render() {
return <div>{this.props.count}</div>;}}

函数组件示例

function Example({ count }) {
useEffect(() => {
console.log("组件更新了！");
}, [count]); // 当 count 变化时执行
return <div>{count}</div>;}

小技巧：

• 如果你不加依赖项，useEffect 每次渲染都会执行。
• 如果依赖项是空数组，只在挂载时执行一次。
• 如果依赖项包含变量，只在那个变量变化时执行。

用户触发更新的具体例子：

function Counter() {
const [count, setCount] = useState(0);
return (
<><p>点击次数：{count}</p><button onClick={() => setCount(count + 1)}>点我</button></>);}

每当你点击按钮时，setCount 改变了 state，
React 就会重新渲染组件，执行更新阶段。

---

三、卸载阶段（Unmount）

卸载，就是组件“离开”页面的时刻。
React 会把它从 DOM 中移除。

类组件：

class Example extends React.Component {
componentWillUnmount() {
console.log("组件被卸载了 ");
}
render() {
return <div>再见！</div>;}}

函数组件：

import { useEffect } from "react";
function Example() {
useEffect(() => {
console.log("组件挂载");
return () => {
console.log("组件卸载 ");
};
}, []);
return <div>再见！</div>;}

注意这里的 return () => {} 就是 清理函数，
React 会在组件卸载时调用它，非常适合：

• 清除定时器
• 取消网络请求
• 移除事件监听器

那用户是怎么触发卸载的呢？

当一个组件不再被渲染时，就会触发卸载。
这通常由以下操作引起：

• 切换页面或路由（比如从 /home 跳到 /profile）
• 条件渲染变为 false（{show && <Modal />} 从 true → false）
• 组件被父组件移除（父组件结构或 state 改变导致不再渲染它）
• React 丢弃旧的组件实例（如 key 改变时）

举个例子：

// page.tsx
"use client";
import React, { useEffect, useState } from "react";
function App() {
const [show, setShow] = useState(true);
return (
<><button onClick={() => setShow(!show)}>{show ? "卸载组件" : "重新加载组件"}</button>{show && <Child />}</>);}function Child() {useEffect(() => {console.log("Child 挂载");return () => console.log("Child 卸载");}, []);return <p> 我是子组件</p>;}export default App;

点击按钮时，show 从 true → false，React 会移除 <Child />，
执行清理函数，也就是“卸载阶段”。

---

一个完整的流程图

挂载（Mount） → 更新（Update） → 卸载（Unmount）↑                ↑                 ↑useEffect([])     useEffect([deps])   return cleanup()componentDidMount componentDidUpdate  componentWillUnmount

生命周期与用户行为总结图

用户操作或数据变化↓┌───────────────┐│ 挂载（Mount） │  ← 第一次显示（点击打开、切换路由等）└──────┬────────┘↓│ 更新（Update） │ ← 用户输入、点击、接口返回数据等↓┌──────┴────────┐│ 卸载（Unmount）│ ← 页面切换、隐藏组件、销毁实例等└────────────────┘

---

举个实际的小例子

我们来写一个计时器组件，看看三个阶段是怎么触发的：

import { useEffect, useState } from "react";
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("⏱ 组件挂载");
const timer = setInterval(() => setCount(c => c + 1), 1000);
return () => {
console.log(" 清除定时器，组件卸载");
clearInterval(timer);
};
}, []);
useEffect(() => {
console.log(" count 更新为：", count);
}, [count]);
return <h1>时间：{count}</h1>;}export default Timer;

• 第一次显示时，会打印“组件挂载”
• 每秒 count 更新一次，会打印“count 更新为…”
• 当组件被移除时（比如跳转页面），会打印“清除定时器，组件卸载”

---

总结表

阶段	类组件方法	函数组件写法	常见用途	常见触发操作
挂载	componentDidMount	useEffect(() => {}, [])	初始化、数据请求	页面加载、点击显示、条件渲染变为 true
更新	componentDidUpdate	useEffect(() => {}, [deps])	响应数据变化	用户输入、点击按钮、父组件更新
卸载	componentWillUnmount	useEffect(() => { return cleanup }, [])	清理副作用	路由切换、隐藏组件、条件渲染变为 false

---

写在最后

理解 React 的三个阶段只是第一步，
更重要的是要明白——是谁触发了这些阶段的变化？

挂载：组件第一次出现（比如你点击“展开详情”）
更新：组件里的数据或父组件数据变了
卸载：组件被移除或页面跳转

---