React 组件的生命周期是理解组件行为的关键，分为三个主要阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting）。以下是详细说明：

1. 挂载阶段 📌

当组件首次渲染时，会经历以下步骤：

  • constructor()：初始化状态和绑定方法
    React_生命周期_构造函数
  • render()：返回 JSX 结构
  • componentDidMount()：挂载后执行（类组件） / useEffect()（函数组件）
    React_生命周期_挂载后执行

📝 小贴士：函数组件的 useEffect 相当于类组件的 componentDidMount 和 componentDidUpdate 的组合，但更灵活！

2. 更新阶段 🔄

当组件接收到新的 props 或 state 时：

  • shouldComponentUpdate()：决定是否重新渲染（类组件）
  • render()：再次生成 JSX
  • componentDidUpdate()：更新后执行（类组件） / useEffect（函数组件）
    React_生命周期_更新过程

🚫 注意：函数组件默认不会触发不必要的重新渲染，但需谨慎使用 useEffect 的依赖项！

3. 卸载阶段 🧹

当组件从 DOM 中移除时：

  • componentWillUnmount()：清理资源（类组件）
  • useEffect 的清理函数（函数组件）
    React_生命周期_卸载

📚 扩展阅读：想深入了解状态管理？请访问 /react_tutorial/state_management 探索更多！