Back to Details

react18-lifecycle-patterns

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React 18 Lifecycle Patterns

React 18 生命周期模式

Reference for migrating the three unsafe class component lifecycle methods to React 18.3.1 compliant patterns.
用于将三个不安全的类组件生命周期方法迁移为符合React 18.3.1规范的模式参考。

Quick Decision Guide

快速决策指南

Before migrating any lifecycle method, identify the semantic category of what the method does. Wrong category = wrong migration. The table below routes you to the correct reference file.
在迁移任何生命周期方法前，请先明确该方法实现逻辑的语义类别。分类错误=迁移错误。下表将指引你找到正确的参考文档。

componentWillMount - what does it do?

componentWillMount - 它的作用是什么？

What it doesCorrect migrationReference
Sets initial state (
this.setState(...)
)		Move to 
constructor
→ componentWillMount.md
Runs a side effect (fetch, subscription, DOM)Move to 
componentDidMount
→ componentWillMount.md
Derives initial state from propsMove to 
constructor
with props		→ componentWillMount.md
功能正确迁移方案参考
设置初始状态 (
this.setState(...)
)		移至
constructor
→ componentWillMount.md
执行副作用（请求、订阅、DOM操作）移至
componentDidMount
→ componentWillMount.md
基于props派生初始状态移至接收props参数的
constructor
→ componentWillMount.md

componentWillReceiveProps - what does it do?

componentWillReceiveProps - 它的作用是什么？

What it doesCorrect migrationReference
Async side effect triggered by prop change (fetch, cancel)
componentDidUpdate
→ componentWillReceiveProps.md
Pure state derivation from new props (no side effects)
getDerivedStateFromProps
→ componentWillReceiveProps.md
功能正确迁移方案参考
由props变化触发的异步副作用（请求、取消请求）
componentDidUpdate
→ componentWillReceiveProps.md
基于新props派生纯状态（无副作用）
getDerivedStateFromProps
→ componentWillReceiveProps.md

componentWillUpdate - what does it do?

componentWillUpdate - 它的作用是什么？

What it doesCorrect migrationReference
Reads the DOM before update (scroll, size, position)
getSnapshotBeforeUpdate
→ componentWillUpdate.md
Cancels requests / runs effects before update
componentDidUpdate
with prev comparison		→ componentWillUpdate.md
功能正确迁移方案参考
更新前读取DOM信息（滚动位置、尺寸、坐标）
getSnapshotBeforeUpdate
→ componentWillUpdate.md
更新前取消请求/执行副作用带旧值对比的
componentDidUpdate
→ componentWillUpdate.md

The UNSAFE_ Prefix Rule

UNSAFE_ 前缀规则

Never use 
UNSAFE_componentWillMount
, 
UNSAFE_componentWillReceiveProps
, or 
UNSAFE_componentWillUpdate
as a permanent fix.
Prefixing suppresses the React 18.3.1 warning but does NOT:
  • Fix concurrent mode safety issues
  • Prepare the codebase for React 19 (where these are removed, with or without the prefix)
  • Fix the underlying semantic problem the migration is meant to address
The UNSAFE_ prefix is only appropriate as a temporary hold while scheduling the real migration sprint. Mark any UNSAFE_ prefix additions with:
jsx
// TODO: React 19 will remove this. Migrate before React 19 upgrade.
// UNSAFE_ prefix added temporarily - replace with componentDidMount / getDerivedStateFromProps / etc.
绝对不要将
UNSAFE_componentWillMount
、
UNSAFE_componentWillReceiveProps
或
UNSAFE_componentWillUpdate
作为永久解决方案。
添加前缀只会消除React 18.3.1的警告，但不会：
  • 修复并发模式的安全问题
  • 让代码库适配React 19（该版本将彻底移除这些方法，无论是否带UNSAFE_前缀）
  • 解决迁移本应处理的底层语义问题
UNSAFE_前缀仅适合作为临时过渡方案，用于在排期安排正式迁移迭代前暂时压制警告。所有添加UNSAFE_前缀的位置都要标注如下注释：
jsx
// TODO: React 19 will remove this. Migrate before React 19 upgrade.
// UNSAFE_ prefix added temporarily - replace with componentDidMount / getDerivedStateFromProps / etc.

Reference Files

参考文件

Read the full reference file for the lifecycle method you are migrating:
  • references/componentWillMount.md
     - 3 cases with full before/after code
  • references/componentWillReceiveProps.md
     - getDerivedStateFromProps trap warnings, full examples
  • references/componentWillUpdate.md
     - getSnapshotBeforeUpdate + componentDidUpdate pairing
Read the relevant file before writing any migration code.
请阅读你要迁移的生命周期方法对应的完整参考文档：
  • references/componentWillMount.md
     - 3种场景的完整迁移前后代码示例
  • references/componentWillReceiveProps.md
     - getDerivedStateFromProps陷阱警告、完整示例
  • references/componentWillUpdate.md
     - getSnapshotBeforeUpdate + componentDidUpdate搭配用法
编写任何迁移代码前请先阅读对应文档。