React 生命周期概览

React 生命周期在函数组件中主要由 Hooks（特别是 useEffect） 来管理；而在类组件中则通过生命周期方法（如 componentDidMount）来处理。

---

🧱 函数组件生命周期分 3 个阶段：

阶段	对应 Hook	含义或作用
✅ 挂载	useEffect(() => {...}, [])	组件首次渲染后执行（类似 componentDidMount）
🔁 更新	useEffect(() => {...}, [依赖])	依赖值变化时触发
❌ 卸载	useEffect(() => { return () => {...} }, [])	组件卸载前执行清理逻辑（比如取消定时器）

---

✅ 示例：函数组件完整生命周期

import { useEffect } from "react";function MyComponent({ name }) {// 挂载阶段useEffect(() => {console.log("组件挂载");// 卸载阶段（return 中写清理逻辑）return () => {console.log("组件卸载");};}, []);// 更新阶段useEffect(() => {console.log("name 更新为", name);}, [name]);return <div>Hello, {name}</div>;
}

---

📜 类组件生命周期（供对比理解）

如果你用 class 编写组件，它的生命周期是这样分布的：

生命周期方法	触发时机
constructor	创建组件实例时
componentDidMount	组件挂载后（初次渲染）
shouldComponentUpdate	更新前判断是否更新
componentDidUpdate	组件更新完成后
componentWillUnmount	组件卸载前

类组件写法（示例）：

class MyComponent extends React.Component {componentDidMount() {console.log("挂载完毕");}componentDidUpdate() {console.log("更新完毕");}componentWillUnmount() {console.log("即将卸载");}render() {return <div>Hello</div>;}
}

---

✅ 常见用途（函数组件中）

用途	写法
获取数据（仅首次）	useEffect(() => { fetchData() }, [])
清除计时器/订阅等资源	return () => clearInterval(...)
监听 props 或状态更新	useEffect(() => {...}, [propOrState])

---

🧠 小贴士：多个 useEffect 是互不干扰的

React 会按顺序执行它们（挂载 → 更新 → 卸载），你可以组织逻辑更清晰。

---

✅ 总结一句话

在函数组件中，useEffect 让你处理副作用逻辑（网络请求、订阅、手动更新 DOM 等），你可以通过依赖数组精准控制触发时机，相当于类组件生命周期的统一替代。