react class组件生命周期分为挂载、更新、卸载和错误处理四阶段：挂载时依次执行constructor、getderivedstatefromprops、render、componentdidmount；更新时触发getderivedstatefromprops、shouldcomponentupdate、render、getsnapshotbeforeupdate、componentdidupdate；卸载时执行componentwillunmount；错误处理通过getderivedstatefromerror和componentdidcatch实现。

在 React 中，Class 组件通过预定义的方法名实现生命周期钩子，这些方法会在组件不同阶段自动被 React 调用。关键在于正确命名、合理使用，并注意 React 版本差异（尤其是 v16.3+ 对废弃 API 的调整）。

挂载阶段：组件初次渲染时触发

以下方法在组件插入 DOM 前后依次执行：

• constructor()：初始化 state 和绑定事件处理器，不建议在此发起副作用（如 API 请求）
• static getDerivedStateFromProps()：纯函数，返回一个对象来更新 state（仅当 props 变化需同步 state 时使用，极少场景）
• render()：必须实现，返回 JSX，不可包含副作用
• componentDidMount()：组件挂载完成，DOM 可访问，适合发请求、设置定时器、添加事件监听

更新阶段：props 或 state 改变时触发

每次重新渲染前/后都会按序调用（注意性能与副作用时机）：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

• static getDerivedStateFromProps()：同样在更新前调用，用于响应 props 变化派生 state
• shouldComponentUpdate()：返回布尔值，可手动控制是否继续更新（默认 true；浅比较优化可用 PureComponent 替代）
• render()：重新生成虚拟 DOM
• getSnapshotBeforeUpdate()：获取更新前的 DOM 信息（如滚动位置），返回值会作为第三个参数传给 componentDidUpdate
• componentDidUpdate(prevProps, prevState, snapshot)：更新完成，适合对比 prevProps/prevState 执行副作用（如条件请求、DOM 操作）

卸载阶段：组件从 DOM 移除时触发

仅有一个钩子，确保清理工作不遗漏：

• componentWillUnmount()：清除定时器、取消网络请求、移除事件监听等，防止内存泄漏

错误处理：捕获子组件渲染异常

用于降级 UI 或记录错误日志：

• static getDerivedStateFromError(error)：返回新 state，使组件渲染 fallback UI
• componentDidCatch(error, info)：接收错误对象和组件栈信息，适合上报错误日志