Function Component Lifecycle函数组件生命周期

欢迎来到 函数组件生命周期 课程！通过观看本视频，你将能够：

• 定义 React 中的函数组件
• 识别函数组件生命周期的四个不同阶段

---

什么是函数组件生命周期？

在 React 中，函数组件是构建用户界面的基础构建块。理解函数组件的生命周期对于管理组件的行为和状态至关重要。

虽然函数组件缺少类组件中传统的生命周期方法，但开发者可以通过 hooks（如 useState、useEffect 和 useReducer 等）实现类似的功能。

生命周期的四个阶段

函数组件的生命周期包括以下四个阶段：

1. 挂载阶段 (Mounting)
2. 更新阶段 (Updating)
3. 卸载阶段 (Unmounting)
4. 错误处理阶段 (Error Handling)

---

挂载阶段 (Mounting Phase)

在挂载阶段，React 初始化函数组件，为其渲染到 DOM 做好准备。挂载阶段的主要步骤包括：

1初始化

• React 执行函数组件的主体，设置组件的初始结构和行为。

2状态初始化

• React 使用 useState hook 声明并初始化状态变量。这些状态变量保存可能随着时间变化的数据，当数据发生变化时，会触发组件重新渲染。

示例useState初始化

const [count, setCount] = useState(0);  // 初始化状态变量 count，初始值为 0

• 当 setCount 被调用时，count 的值会更新，并触发组件的重新渲染。

3副作用处理

• React 使用 useEffect hook 来执行副作用（如数据获取、订阅或 DOM 操作）。在挂载阶段，useEffect 确保副作用仅在初次渲染后执行一次，以优化性能并避免不必要的重新执行。

示例：数据获取

useEffect(() => {
  fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => setData(data));
}, []);  // 空依赖数组，确保副作用只执行一次

---

更新阶段 (Updating Phase)

在更新阶段，React 响应组件的状态或属性的变化，重新调用函数组件的主体。这一阶段重新评估 JSX，从而决定新的 UI 需要渲染什么内容。

示例：状态更新

const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);  // 更新状态

• 每当用户点击按钮时，increment 函数调用 setCount，更新 count 状态，触发组件重新渲染，并在页面上显示更新后的值。

---

卸载阶段 (Unmounting Phase)

在卸载阶段，React 会在组件从 DOM 中移除时执行清理操作。这包括清理事件监听器、订阅、计时器或组件在生命周期中创建的任何其他资源。

示例：定时器清理

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log("Interval tick");
  }, 1000);

  return () => clearInterval(intervalId);  // 清理定时器
}, []);

• 当组件卸载时，clearInterval 会停止定时器，释放相关资源，防止内存泄漏。

---

错误处理阶段 (Error Handling Phase)

如果在渲染过程中或子组件的生命周期方法中发生错误，React 会将错误传递给最近的 错误边界 (Error Boundary) 组件进行处理。

错误边界 (Error Boundaries)

错误边界是 React 中的特殊组件，用于捕捉子组件渲染阶段或生命周期方法中的错误。错误边界会展示一个后备 UI，避免整个应用崩溃，并确保错误不会向上传播，从而保持应用的其余部分正常运行。

---

总结

在本视频中，你学到了：

• React 的生命周期包括挂载、更新、卸载和错误处理四个阶段。
• 挂载阶段：初始化组件，设置初始状态并执行副作用。
• 更新阶段：响应状态或属性的变化，重新评估 JSX 并更新 UI。
• 卸载阶段：清理操作，确保移除组件时释放相关资源。
• 错误处理阶段：通过错误边界处理组件内的错误，避免应用崩溃。

---

🎶 继续学习并深入了解 React 的更多技巧！ 🚀