React 组件生命周期详解
一份适合编程小白的通俗易懂指南，用大白话解释React组件生命周期的各个阶段和核心方法
组件生命周期就像人的一生：出生（挂载） → 成长变化（更新） → 死亡（卸载）。React 提供了在这些关键节点进行操作的”钩子”函数，让你可以在特定时刻执行自己的代码。
1. 挂载阶段 (Mounting)
组件被创建并插入到DOM中，就像婴儿出生一样。
📌 组件的”出生证明”
• 最先执行，用于初始化状态(state)和绑定方法
• 必须调用super(props)开头
• 不要在这里执行有副作用的操作
🔍 翻译官：将props转换为state
• 在render之前调用
• 用于props变化时更新state
• 返回一个对象更新state，返回null则不更新
🎨 组件的”外貌设计师”
• 必须实现的核心方法
• 返回JSX描述组件UI
• 应该是纯函数，不修改组件状态
🚀 组件的”成人典礼”
• 组件挂载后立即调用
• 最适合进行：网络请求、DOM操作、设置订阅
• 可以在这里调用setState()触发重新渲染
2. 更新阶段 (Updating)
组件更新状态或属性后的变化过程，就像人的成长变化。
🔁 更新时的”翻译官”
• 在更新阶段也会调用
• 功能与挂载时相同
⚖️ 性能优化”守门员”
• 决定组件是否应该更新
• 返回false可以阻止重新渲染
• 通常用于性能优化
🔄 更新界面的”化妆师”
• 根据新的state/props重新渲染UI
📸 更新前的”快照师”
• DOM更新前捕获信息（如滚动位置）
• 返回值将作为参数传递给componentDidUpdate
🛠 更新后的”维护工”
• 更新完成后立即调用
• 适合操作DOM、发送网络请求（需比较props）
• 可以调用setState()但必须放在条件语句中
3. 卸载阶段 (Unmounting)
组件从DOM中移除的过程，就像生命的结束。
🧹 组件的”临终遗嘱”
• 组件销毁前调用
• 必须清理：计时器、网络请求、订阅等
• 不要再调用setState()
4. 错误处理 (Error Handling)
组件发生错误时的处理机制，就像生病需要医治。
🚑 错误状态的”医生”
• 后代组件抛出错误后调用
• 返回一个值更新state以显示备用UI
📝 错误记录的”护士”
• 后代组件抛出错误后调用
• 用于记录错误信息到日志系统
React 生命周期流程图
了解即可：过时的生命周期方法
这些方法在React 16.3后被标记为过时，不推荐使用：
• 在组件挂载前调用
• 问题：可能被调用多次
• 替代：使用constructor()或componentDidMount()
• 组件接收新的props时调用
• 问题：可能被调用多次
• 替代：使用getDerivedStateFromProps()
• 组件即将更新前调用
• 问题：可能被调用多次
• 替代：使用getSnapshotBeforeUpdate()