React Patterns 是一份面向 React 19 的编码模式参考，通过代码示例展示现代 React 的常见写法与最佳实践。
用途 该资料用于指导开发者编写符合 React 19 特性的组件与数据流代码，覆盖服务端渲染、表单处理、异步数据读取、状态管理与性能优化等场景。
主要能力
- use() Hook（React 19）：可直接在渲染中读取 Promise 与 Context 的值，且允许在条件语句和循环中调用。使用 Promise 时需用 <Suspense> 边界包裹组件。
- Server Components：默认在服务端运行，无需指令；示例展示在页面组件中异步获取数据并传递给子组件。建议将 'use client' 尽可能下推到需要交互的叶子组件。
- Server Actions：通过 'use server' 声明，可在表单 action 中直接调用，配合 revalidatePath 与 redirect 完成数据写入与页面刷新。
- useActionState（React 19）：管理表单 action 的状态、错误信息与 pending 状态。
- useOptimistic（React 19）：在异步操作完成前乐观更新 UI。
- Suspense 边界：建议围绕独立的数据获取单元放置，避免整页包裹单个边界。
- 错误边界：提供类组件实现示例，并提及 Next.js 的 error.tsx 约定。
- 自定义 Hooks：给出 useDebounce、useLocalStorage 示例，并列出命名前缀、提取时机、单一职责、返回值形式等规则。
- 复合组件：以 Tabs 为例展示通过 Context 共享状态、以静态属性挂载子组件的模式。
- 性能规则：避免在 JSX props 中创建对象/数组、仅在性能分析确认后使用 React.memo、合理使用 useMemo/useCallback、用 key 重置状态、就近放置状态、避免超过两层的 prop drilling。
使用方式 资料以代码片段形式呈现，开发者可直接参考示例编写组件、表单、数据获取逻辑与自定义 Hooks。示例涉及 Next.js 的 app 目录约定（如 app/users/page.tsx、app/actions.ts、error.tsx），但核心模式适用于支持 React 19 的环境。
适用场景 适用于使用 React 19 构建应用的前端开发，尤其是需要服务端组件、表单 action、异步数据流、乐观更新与组件组合的场景。
限制 资料未提供安装命令、依赖版本要求、完整项目配置或运行环境说明；部分示例依赖 Next.js 特定 API（如 next/cache、next/navigation），在非 Next.js 环境中需自行适配。