react18-lifecycle-patterns

React 18 生命周期模式

将三个不安全的类组件生命周期方法迁移到符合 React 18.3.1 规范的模式的参考。

快速决策指南

在迁移任何生命周期方法之前，先确定该方法所做事情的语义类别。类别错误 = 迁移错误。下表将引导你找到正确的参考文件。

componentWillMount - 它做什么？

它做什么	正确的迁移	参考
设置初始状态（this.setState(...)）	移至 constructor	→ componentWillMount.md
运行副作用（fetch、订阅、DOM）	移至 componentDidMount	→ componentWillMount.md
从 props 派生初始状态	使用 props 移至 constructor	→ componentWillMount.md

componentWillReceiveProps - 它做什么？

它做什么	正确的迁移	参考
由 prop 变化触发的异步副作用（fetch、cancel）	componentDidUpdate	→ componentWillReceiveProps.md
从新 props 进行纯状态派生（无副作用）	getDerivedStateFromProps	→ componentWillReceiveProps.md

componentWillUpdate - 它做什么？

它做什么	正确的迁移	参考
在更新前读取 DOM（滚动、尺寸、位置）	getSnapshotBeforeUpdate	→ componentWillUpdate.md
取消请求 / 在更新前运行副作用	带 prev 比较的 componentDidUpdate	→ componentWillUpdate.md

---

UNSAFE_ 前缀规则

切勿将 UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps 或 UNSAFE_componentWillUpdate 用作永久修复方案。

添加前缀会抑制 React 18.3.1 的警告，但并不会：

• 修复并发模式的安全性问题
• 使代码库为 React 19 做好准备（在这些版本中，无论是否带前缀，这些方法都会被移除）
• 修复迁移本应解决的底层语义问题

UNSAFE_ 前缀仅适合作为在安排真正的迁移冲刺期间的临时保留措施。为任何新增的 UNSAFE_ 前缀标记：

// TODO: React 19 will remove this. Migrate before React 19 upgrade.
// UNSAFE_ prefix added temporarily - replace with componentDidMount / getDerivedStateFromProps / etc.

---

参考文件

阅读你正在迁移的生命周期方法的完整参考文件：

• references/componentWillMount.md - 3 个案例，包含完整的迁移前后代码
• references/componentWillReceiveProps.md - getDerivedStateFromProps 陷阱警告、完整示例
• references/componentWillUpdate.md - getSnapshotBeforeUpdate + componentDidUpdate 配对

在编写任何迁移代码之前，请先阅读相关文件。