React.js 生命周期方法有哪些变化

React 生命周期方法的变化

主要变化概览

• 新增：static getDerivedStateFromProps、getSnapshotBeforeUpdate，用于在渲染前后更安全地处理派生状态与捕获 DOM 信息。
• 重命名并标注不安全：componentWillMount → UNSAFE_componentWillMount、componentWillReceiveProps → UNSAFE_componentWillReceiveProps、componentWillUpdate → UNSAFE_componentWillUpdate，提示在异步渲染场景下可能产生副作用，官方不推荐继续使用。
• 删除：自 React 17 起，上述三个不带前缀的旧“will”方法被彻底移除，仅保留带 UNSAFE_ 前缀的版本（仍不推荐）。
• 新增错误处理阶段：componentDidCatch、getDerivedStateFromError，用于错误边界与降级 UI。
• 并发渲染影响：引入 Fiber/并发渲染 后，渲染前的方法可能被中断或多次调用，导致副作用风险上升，这是调整的核心原因之一。

版本演进时间线

• React 16.3：引入 getDerivedStateFromProps 与 getSnapshotBeforeUpdate；为旧“will”方法添加 UNSAFE_ 前缀，但暂不删除，开发期会提示弃用警告。
• React 16.4：将 getDerivedStateFromProps 调整为在每次渲染前调用（挂载与更新均会调用），语义更稳定。
• React 17：移除 componentWillMount / componentWillReceiveProps / componentWillUpdate 三个旧方法，仅保留 UNSAFE_ 版本（仍不建议使用）。

典型替代方案与用法

• 用 static getDerivedStateFromProps(nextProps, prevState) 替代 componentWillReceiveProps 的“根据 props 同步更新 state”的场景；注意它是静态方法、应纯函数、在每次渲染前调用，适合做受控与非受控状态的同步与复位。
• 用 getSnapshotBeforeUpdate(prevProps, prevState) 替代 componentWillUpdate 中需要“读取更新前 DOM 信息”的场景（如记录滚动位置）；其返回值会作为第三个参数传入 componentDidUpdate。
• 副作用（如数据请求、订阅、手动 DOM 操作）尽量放在 componentDidMount / componentDidUpdate 中，避免在“will”阶段执行。

新旧生命周期对照

迁移与最佳实践

• 将 componentWillReceiveProps 的“根据 props 设 state”逻辑迁移到 getDerivedStateFromProps；若需要副作用，放到 componentDidUpdate。
• 将依赖“更新前 DOM”的逻辑从 componentWillUpdate 迁移到 getSnapshotBeforeUpdate，并在 componentDidUpdate 使用其返回值完成后续处理。
• 避免在 constructor 之外调用 setState；避免在“will”阶段发起副作用或订阅。
• 启用严格模式（StrictMode）以发现潜在问题；在 React 17+ 直接删除不带 UNSAFE_ 的旧“will”方法，避免运行时错误。