react19-concurrent-patterns

React 19 并发模式

React 19 引入了新的 API，与迁移工作相辅相成。本技能涵盖两个方面：

1. 保留 迁移过程中不得破坏的现有 React 18 并发模式
2. 采用 在迁移稳定后值得引入的新 React 19 API

第 1 部分 保留：迁移后必须继续存在的 React 18 并发模式

这些模式存在于 React 18 代码库中，不得在迁移过程中被意外移除或破坏：

createRoot 已由 R18 orchestra 完成迁移

如果 R18 orchestra 已经运行，则 ReactDOM.render → createRoot 已完成。请验证其是否正确：

// CORRECT React 19 root (same as React 18):
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

useTransition 无需迁移

React 18 中的 useTransition 在 React 19 中行为完全相同。迁移期间不要改动这些模式：

// React 18 useTransition  unchanged in React 19:
const [isPending, startTransition] = useTransition();

function handleClick() {
  startTransition(() => {
    setFilteredResults(computeExpensiveFilter(input));
  });
}

useDeferredValue 无需迁移

// React 18 useDeferredValue  unchanged in React 19:
const deferredQuery = useDeferredValue(query);

用于代码分割的 Suspense 无需迁移

// React 18 Suspense with lazy  unchanged in React 19:
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}

---

第 2 部分 React 19 新 API

这些 API 值得在迁移后的清理冲刺中采用。不要在迁移过程中引入它们 先稳定下来。

关于每个新 API 的完整模式，请阅读：

• references/react19-use.md 用于 promise 和 context 的 use() hook
• references/react19-actions.md Actions、useActionState、useFormStatus、useOptimistic
• references/react19-suspense.md 用于数据获取的 Suspense（新模式）

迁移安全规则

在 React 19 迁移期间，这些并发模式必须完全保持原样：

# Verify nothing touched these during migration:
grep -rn "useTransition\|useDeferredValue\|Suspense\|startTransition" \
  src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

如果迁移工具改动过其中任何文件，请审查这些改动 迁移只应修改 React API 表面（forwardRef、defaultProps 等），绝不能改动并发模式逻辑。