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

2025-11-11 16:52 tlnshuju 阅读(0) 评论(0) 收藏举报

文章目录

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

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 更新为…”
当组件被移除时（比如跳转页面），会打印“清除定时器，组件卸载”