Open Skills Logo
Open Skillsopenskills.cc
技能react-patterns
R

react-patterns

现代React模式与原则。Hooks应用、组件组合、性能优化、TypeScript最佳实践。

React Patterns - 现代开发模式与最佳实践

技能概述

React Patterns 提供构建生产级 React 应用的完整设计指南，涵盖组件设计原则、Hook 模式、状态管理选择、性能优化策略以及 TypeScript 最佳实践，帮助开发者写出可维护、高性能的 React 代码。

适用场景

  1. 新建 React 项目架构设计 为新项目确定组件划分方案、状态管理策略和技术选型，从零开始构建可扩展的 React 应用架构，避免后期重构成本。

  2. 现有 React 代码优化重构 识别和消除代码中的反模式，如组件过大、prop drilling、过度使用 useEffect 等，提升代码质量和可维护性。

  3. React 团队开发规范制定 为团队建立统一的组件设计标准、Hook 使用规范、错误处理模式和测试原则，确保代码风格一致性和可维护性。

核心功能

  1. 组件设计模式指导 提供四种组件类型（Server、Client、Presentational、Container）的使用指南，明确组件职责划分原则，包括单一职责、Props 下传事件上传、组合优于继承等设计规则，帮助开发者构建清晰可维护的组件结构。

  2. Hook 模式与提取策略 定义自定义 Hook 的提取时机和使用规则，涵盖 useLocalStorage、useDebounce、useFetch、useForm 等常见模式，强调 Hooks 顶层调用、顺序一致性和清理副作用的重要性，实现逻辑复用和代码简化。

  3. 状态管理决策树 根据应用复杂度提供清晰的状态管理选择路径：简单场景用 useState/useReducer，局部共享用 Context，服务端状态用 React Query/SWR，复杂全局状态用 Zustand/Redux Toolkit，并明确不同范围的状态放置策略。

  4. React 19 新特性应用 介绍 useActionState、useOptimistic、use 等新 Hook 的用途，以及 React Compiler 带来的自动记忆化优化，指导开发者利用最新特性减少手动优化代码。

  5. 性能优化方法论 提供系统化的性能优化流程：先确认是否真的慢、用 DevTools 分析、定位瓶颈、针对性修复。涵盖虚拟列表、useMemo、useCallback 的正确使用场景，避免过早优化。

  6. 错误处理体系 定义错误边界的分层放置策略（应用级、功能级、组件级），以及错误恢复的完整流程：展示降级 UI、记录错误、提供重试选项、保护用户数据。

  7. TypeScript 类型模式 提供 Props 类型定义的最佳实践，区分 Interface、Type、Generic 的使用场景，汇总 ReactNode、MouseEventHandler、RefObject 等常用类型，提升类型安全。

  8. 测试分层原则 建立单元测试（纯函数和 Hook）、集成测试（组件行为）、E2E 测试（用户流程）的测试金字塔，明确测试优先级：用户可见行为、边界情况、错误状态、可访问性。

常见问题

React 组件什么时候应该拆分？

当组件承担多个职责、代码行数超过 200 行、Props 数量超过 7 个，或者某些逻辑可以在多个组件中复用时，就应该考虑拆分。拆分的原则是单一职责：展示组件只负责 UI 渲染，容器组件负责状态和逻辑。拆分的好处包括更好的可测试性、更清晰的关注点分离以及更高的代码复用性。

自定义 Hook 在什么情况下需要提取？

当代码中出现重复的状态逻辑（如多个组件都需要本地存储同步）、复杂的副作用管理（如带防抖的 API 调用），或者需要将组件逻辑与 UI 分离时，就应该提取自定义 Hook。常见的提取场景包括：useLocalStorage（跨组件的存储逻辑）、useDebounce（多个防抖值）、useFetch（重复的数据获取模式）、useForm（复杂的表单状态管理）。自定义 Hook 必须以 "use" 开头，并在组件顶层调用。

React 状态管理方案应该如何选择？

根据状态复杂度和共享范围来决策：单一组件内用 useState，父子组件间提升状态，组件子树共享用 Context，简单全局状态用 Context + useReducer，服务端状态用 React Query/SWR，复杂全局状态用 Zustand 或 Redux Toolkit。选择的关键是先用最简单的方案，遇到实际痛点时再升级，避免一开始就引入过重的状态管理库。

React 性能优化的正确顺序是什么？

优化必须遵循严格的顺序：首先确认是否真的存在性能问题（用户感知），然后用 React DevTools Profiler 定位瓶颈，最后针对性修复。常见的优化手段包括：大列表虚拟化、昂贵计算用 useMemo、稳定引用用 useCallback。切记不要过早优化，大部分 React 应用不需要手动优化，React 19 的 Compiler 会自动处理大部分记忆化需求。

React 19 有哪些新的模式和特性？

React 19 引入了三个重要的新 Hook：useActionState 用于表单提交状态管理，useOptimistic 用于乐观 UI 更新（如点赞、收藏），use 用于在渲染中直接读取资源（简化 Promise 和 Context 读取）。更重要的是 React Compiler，它能自动优化组件，减少手动使用 useMemo 和 useCallback 的需求，让开发者专注于编写纯组件。

React 组件设计中应该避免哪些反模式？

常见的反模式包括：深层 prop drilling（应该用 Context）、巨型组件（应该按职责拆分）、滥用 useEffect 处理所有逻辑（优先使用 Server Components）、用数组索引作为 key（应该用稳定的唯一 ID）、过早优化（先 Profile 再优化）、Props 类型用 any（应该用 TypeScript 明确定义）。避免这些反模式能显著提升代码的可维护性和性能。

React + TypeScript 开发有哪些最佳实践？

组件 Props 优先使用 Interface 定义，方便扩展；联合类型和复杂类型用 Type；可复用组件使用 Generic。常用类型包括：ReactNode（children）、MouseEventHandler（事件处理）、RefObject（Ref）。避免使用 FC 类型直接定义组件，直接声明函数组件更清晰。为组件 Props 添加明确的注释，特别是布尔类型的 Props。

React 错误处理应该如何设计？

建立分层的错误边界体系：应用根级别放置全局错误边界捕获所有未捕获错误，路由或功能级别放置功能级错误边界，特定风险组件周围放置组件级错误边界。错误恢复策略包括：展示友好的降级 UI、记录错误到监控系统、提供重试按钮、尽可能保护用户未保存的数据。错误边界无法捕获事件处理器中的错误，这些需要用 try-catch 处理。