# 反应最佳实践 ## 组件设计 * 每个文件一个组件。该文件的名称与组件的名称相同。 * 更喜欢函数组件——永远不要编写类组件。 * 保持组件小而集中。如果某个组件超过约 150 行，请将其拆分。 * 在模块范围内定义组件——永远不要在其他组件内定义组件（破坏状态保存和身份）。 * 将相关文件（组件、钩子、类型、样式、测试）放在同一目录中。 ## 道具 * 函数签名中的解构 props： function UserCard({ 姓名、电子邮件、头像 }: UserCardProps) { ... } * 通过 `React.PropsWithChildren` 或明确的 `children: React.ReactNode` 使用 `children`。 * 优先选择特定的 prop 类型而不是 `Record` 或 `any`。 * 避免道具钻探超过 2-3 层——使用组合、上下文或状态管理解决方案。 ## 钩子 * 遵循 Hooks 规则：仅在顶层调用，仅在 React 组件或自定义钩子中调用。 * 将可重用逻辑提取到自定义挂钩中（“use*”前缀）。 * 保持钩子集中——一个做太多事情的钩子应该被拆分。 ### 状态管理 * 保持状态尽可能本地化。仅当同级组件需要时才提升。 * 使用 `useReducer` 来处理具有多个相关转换的复杂状态。 * 为真正的全球关注点保留上下文（主题、身份验证、区域设置）——不经常更改数据。 * 对于服务器状态，请使用 TanStack Query 或类似的库，而不是 `useState` \+ `useEffect`。 ### React 19 钩子 * **`use()`** ：读取组件内的上下文或解包承诺。替换一些 `useContext` 模式。 * **`useActionState()`** ：管理表单提交状态（待处理、错误、结果），无需手动样板。 * **`useOptimistic()`** ：在异步操作期间立即显示乐观的 UI。 * **`useTransition()`** ：包装非紧急状态更新以保持 UI 响应。 ## React 19 种模式 ### 自动记忆（React 编译器）使用 React 编译器时： * 删除手动 `React.memo()`、`useMemo()` 和 `useCallback()` — 编译器自动处理记忆。 * 如果不使用编译器，仍然要有意——仅在分析揭示出真正的性能问题时才进行记忆。 ### 动作和形式使用 React 19 Actions 进行表单处理：函数 CreatePost() { const [状态，操作，isPending] = useActionState(createPostAction, null); 返回（ <表单动作={动作}> <输入名称=“标题”必需/> <按钮类型=“提交”禁用= {isPending}> 创建 {状态？.错误&&

{状态.错误}

} ）； } ### 服务器组件 * 默认为非交互式内容的服务器组件（数据显示、列表、静态布局）。 * 仅当组件需要交互性（事件处理程序、挂钩、浏览器 API）时才添加“使用客户端”。 * 将“使用客户端”边界尽可能地推到树下。 ## 性能 * 使用 `React.lazy()` \+ `Suspense` 来分割大型路由和重型组件。 * 使用 `startTransition` 进行昂贵的状态更新，不需要立即渲染。 * 在异步数据获取周围包裹“Suspense”边界，以避免瀑布式加载。 * 避免在每次渲染时在 JSX 属性中创建新的对象/数组 - 提取到常量或记忆。 ## 模式 ### 组合优于配置更喜欢可组合的子项而不是巨大的配置道具： // 更喜欢 <对话框> 标题内容 <对话框页脚> <按钮>关闭 // 避免 <对话框标题=“标题” 正文=“内容” 页脚={<按钮>关闭} /> ### 将道具和子项渲染为函数当组件需要共享渲染时数据而不指定 UI 时使用： {(data) => } ### 自定义挂钩 + 组件对将逻辑与表示分离：函数 useUserSearch(查询：字符串) { // 过滤、去抖动、API 调用返回{结果，正在加载，错误}； } 函数用户搜索() { const [查询，setQuery] = useState(""); const { 结果，isLoading } = useUserSearch(query); // 渲染 } ## 错误处理 * 使用错误边界捕获渲染错误并显示后备 UI。 * 不要对事件处理程序错误使用错误边界 - 在处理程序中使用 try/catch。 * 提供有意义的后备 UI，而不是空白屏幕。 ## 测试 * 测试行为，而不是实现。按角色、标签或文本查询，而不是按测试 ID 或 CSS 类查询。 * 使用`@testing-library/react`进行组件测试。 * 模拟网络边界（例如，MSW）而不是模拟挂钩或内部状态。 * 使用来自“@testing-library/react”的“renderHook”测试自定义钩子。 ## 项目结构源代码/ ├── Components/ # 共享/可重用组件 │ └── 按钮/ │ ├── 按钮.tsx │ ├── 按钮.test.tsx │ └── 索引.ts ├── features/ # 特定于功能的代码（组件、钩子、实用程序） │ └── 授权/ ├── hooks/ # 共享自定义钩子 ├── lib/ # 实用程序、API 客户端、帮助程序 ├── types/ # 共享的 TypeScript 类型 └── app/ # 路由/页面将特定于功能的代码放在“features/”中，并且仅在跨功能重用时才提升到“components/”或“hooks/”。

反应最佳实践

包含技能