关于 react19-source-patterns
react19-source-patterns 是供开发者将源文件迁移到 React 19 的参考指南。它将旧 API 和模式对应到替代方案,并提供配套文档中的详细示例。
主要功能
- 01将旧 API 对应到 React 19 替代方案
- 02更新渲染与水合调用
- 03替换旧式 ref 和 Context 模式
- 04保留 propTypes 并添加说明注释
适用场景
- 01规划 React 19 源码迁移
- 02替换已弃用的 DOM API
- 03更新使用 forwardRef 或 defaultProps 的组件
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ github/ awesome-copilot --skill react19-source-patterns安装后在 Claude Code 中输入/react19-source-patterns确认已加载。
附带文件references/api-migrations.md
详细介绍
React 19 源文件迁移模式
React 19 所需的每一项源文件迁移的参考。
快速参考表
| 模式 | 操作 | 参考 |
|---|---|---|
ReactDOM.render(...) | → createRoot().render() | 参见 references/api-migrations.md |
ReactDOM.hydrate(...) | → hydrateRoot(...) | 参见 references/api-migrations.md |
unmountComponentAtNode | → root.unmount() | 内联修复 |
ReactDOM.findDOMNode | → 直接 ref | 内联修复 |
forwardRef(...) 包装 | → ref 作为直接 prop | 参见 references/api-migrations.md |
Component.defaultProps = {} | → ES6 默认参数 | 参见 references/api-migrations.md |
useRef() 无参数 | → useRef(null) | 内联修复 添加 null |
| 旧版 Context | → createContext | → api-migrations.md#legacy-context |
字符串 ref this.refs.x | → createRef() | → api-migrations.md#string-refs |
import React from 'react'(未使用) | 移除 | 仅当文件中未使用 React. 时 |
PropTypes 规则
不要移除 .propTypes 赋值。prop-types 包仍可作为独立校验器使用。React 19 仅从 React 包中移除了内置的运行时检查 该包本身仍然有效。
在任何 .propTypes 代码块上方添加此注释:
// NOTE: React 19 no longer runs propTypes validation at runtime.
// PropTypes kept for documentation and IDE tooling only.
阅读参考
有关每个迁移的完整前后代码,请阅读 references/api-migrations.md。它包含完整的模式,包括 forwardRef 与 useImperativeHandle 配合使用的边缘情况、defaultProps 的 null 与 undefined 行为,以及旧版 context provider/consumer 的跨文件迁移。
评论
支持 Markdown