Back to Details

react18-legacy-context

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React 18 Legacy Context Migration

React 18 旧版Context迁移

Legacy context (
contextTypes
, 
childContextTypes
, 
getChildContext
) was deprecated in React 16.3 and warns in React 18.3.1. It is removed in React 19.
旧版context（
contextTypes
、
childContextTypes
、
getChildContext
）在React 16.3版本中被弃用，在React 18.3.1版本中会触发警告，在React 19版本中已被完全移除。

This Is Always a Cross-File Migration

这始终是跨文件迁移

Unlike most other migrations that touch one file at a time, context migration requires coordinating:
  1. Create the context object (usually a new file)
  2. Update the provider component
  3. Update every consumer component
Missing any consumer leaves the app broken - it will read from the wrong context or get 
undefined
.
和大多数每次仅修改单个文件的迁移不同，context迁移需要协调以下操作：
  1. 创建context对象（通常单独新建文件）
  2. 更新Provider组件
  3. 更新所有消费者组件
遗漏任何一个消费者都会导致应用崩溃——它会读取错误的context或者得到
undefined
。

Migration Steps (Always Follow This Order)

迁移步骤（务必遵循此顺序）

Step 1: Find the provider (childContextTypes + getChildContext)
Step 2: Find ALL consumers (contextTypes)
Step 3: Create the context file
Step 4: Update the provider
Step 5: Update each consumer (class components → contextType, function components → useContext)
Step 6: Verify - run the app, check no legacy context warnings remain
Step 1: Find the provider (childContextTypes + getChildContext)
Step 2: Find ALL consumers (contextTypes)
Step 3: Create the context file
Step 4: Update the provider
Step 5: Update each consumer (class components → contextType, function components → useContext)
Step 6: Verify - run the app, check no legacy context warnings remain

Scan Commands

扫描命令

bash
undefined
bash
undefined

Find all providers

Find all providers

grep -rn "childContextTypes|getChildContext" src/ --include=".js" --include=".jsx" | grep -v ".test."
grep -rn "childContextTypes|getChildContext" src/ --include=".js" --include=".jsx" | grep -v ".test."

Find all consumers

Find all consumers

grep -rn "contextTypes\s*=" src/ --include=".js" --include=".jsx" | grep -v ".test."
grep -rn "contextTypes\s*=" src/ --include=".js" --include=".jsx" | grep -v ".test."

Find this.context usage (may be legacy or modern - check which)

Find this.context usage (may be legacy or modern - check which)

grep -rn "this.context." src/ --include=".js" --include=".jsx" | grep -v ".test."
undefined
grep -rn "this.context." src/ --include=".js" --include=".jsx" | grep -v ".test."
undefined

Reference Files

参考文件

  • references/single-context.md
     - complete migration for one context (theme, auth, etc.) with provider + class consumer + function consumer
  • references/multi-context.md
     - apps with multiple legacy contexts (nested providers, multiple consumers of different contexts)
  • references/context-file-template.md
     - the standard file structure for a new context module
  • references/single-context.md
     - 单个context（主题、鉴权等）的完整迁移示例，包含Provider + 类组件消费者 + 函数组件消费者
  • references/multi-context.md
     - 适用于存在多个旧版context的应用（嵌套Provider、多个不同context的消费者）
  • references/context-file-template.md
     - 新建context模块的标准文件结构