React组件生命周期节点触发时机（组件加载Mount、组件更新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 的三个阶段只是第一步，
更重要的是要明白——是谁触发了这些阶段的变化？

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

---