从 React 18 迁移到 19 时,最常碰到变化的速查表。
API 变化
| 主题 | React 18 | React 19 | 对应章节 |
|---|
| 入口 | ReactDOM.render(legacy) | 只有 createRoot / hydrateRoot | 第 1 章 |
| ref | forwardRef 包裹 | ref 进 props,函数组件直接收 props.ref | 第 2 章 |
| 读异步 | 手动管理 promise + state | use 直接在渲染里读 | 第 16、26 章 |
| 表单 | 手写 useState + fetch | Actions:<form action> + useActionState 等 | 第 31 章 |
| 隐藏状态 | Offscreen(实验) | <Activity> 稳定 | 第 28 章 |
| effect 回调 | 无 | useEffectEvent(19.2) | 第 16 章 |
| 元数据 | 手动 document.title | <title>/<meta> 提升到 head | 第 32 章 |
| 资源 | 手动 <link> | preload/preinit 系列 | 第 32 章 |
| 自动 memo | 手动 useMemo/memo | React Compiler 构建期自动 | 第 24 章 |
| RSC | 实验 | 稳定 | 第 30 章 |
被移除/废弃的
| 项 | 状态 | 替代 |
|---|
ReactDOM.render / hydrate | 移除 | createRoot / hydrateRoot |
| 字符串 ref | 移除 | ref={fn} / ref={object} |
函数组件 defaultProps | 移除(Class 保留) | 默认参数 |
propTypes | 移出 react 包 | TypeScript / 独立方案 |
findDOMNode | 移除 | ref |
React.createFactory | 移除 | JSX |
forwardRef | 废弃(兼容) | ref 进 props |
行为收紧
| 项 | 变化 |
|---|
useRef() | 必须传参,缺参报错 |
act | 必须 await |
element.ref 访问 | 废弃警告(真值在 props.ref) |
useId 格式 | :r0: 改成 _r0_(19.2) |
| 错误处理 | onUncaughtError / onCaughtError 成为 createRoot 正式选项 |
演进脉络
- 18:并发默认(createRoot),但并发能力要你主动用。
- 19.0:
use、Actions、RSC 稳定、ref 进 props、清历史包袱。
- 19.1:
useActionState / useOptimistic 稳定。
- 19.2:
<Activity>、useEffectEvent 稳定,resume / prerender API。
完整演进叙述见第 29 章。