React最佳实践和模式

概览

React是一个用于构建用户界面的JavaScript库，使用基于组件的架构和虚拟DOM以获得最佳性能。React 18+引入了包括带有钩子的函数组件、用于可重用逻辑的自定义钩子、用于全局状态的Context API、用于异步渲染的Suspense以及用于提高性能的并发特性。遵循最佳实践可以确保React应用程序的可维护性、可测试性和性能。

为什么这很重要

减少开发时间：组件重用和钩子减少了开发时间
提高可维护性：组织良好的代码降低了维护成本
改善性能：虚拟DOM和优化增强了性能
增强用户体验：快速渲染和平滑交互
提高代码质量：TypeScript和模式提高了代码质量

核心概念

1. 组件架构

组件模式：

函数组件：使用钩子的默认组件类型
类组件：遗留组件类型（新代码中避免使用）
自定义钩子：可重用的有状态逻辑
高阶组件（HOCs）：组件增强模式
渲染属性：组件组合模式
复合组件：带有上下文的组件组合

2. 状态管理

状态处理策略：

useState：简单的本地状态
useReducer：具有还原器的复杂状态
Context API：全局状态共享
外部状态：Redux、Zustand、Recoil用于复杂状态
服务器状态：React Query、SWR用于服务器状态
表单状态：React Hook Form、Formik用于表单

3. 副作用

效果管理：

useEffect：函数组件中的副作用
useLayoutEffect：同步副作用
useInsertionEffect：CSS-in-JS库集成
useEffectEvent：事件处理程序引用

4. 性能优化

性能模式：

useMemo：记忆昂贵的计算
useCallback：记忆事件处理程序
React.memo：记忆组件渲染
代码分割：动态导入用于懒加载
虚拟化：react-window用于长列表
防抖/节流：优化频繁更新

5. 组合模式

组件组合：

复合组件：父子组件协调
渲染属性：渲染函数属性
Children作为函数：函数作为子组件
插槽模式：命名子组件插槽
控制属性：受控和非受控组件

6. 错误处理

错误管理：

错误边界：捕获组件错误
错误回退：错误的回退UI
Try-Catch：捕获异步错误
错误日志：记录错误以进行调试

快速开始

创建函数组件：将组件构建为函数组件
适当使用钩子：使用useState、useEffect和其他钩子
实现自定义钩子：将可重用逻辑提取到自定义钩子中
优化性能：使用useMemo、useCallback、React.memo
处理状态：选择适当的状态管理策略
添加TypeScript：使用TypeScript进行类型安全
实现错误边界：捕获和处理组件错误
编写测试：使用React Testing Library测试组件
优化捆绑包：使用代码分割和懒加载
监控性能：使用React DevTools跟踪渲染性能

// 简单的展示性组件
type ButtonProps = {
  children: React.ReactNode
  onClick?: () => void
  variant?: 'primary' | 'secondary'
  disabled?: boolean
}

export function Button({
  children,
  onClick,
  variant = 'primary',
  disabled = false
}: ButtonProps) {
  const baseStyles = 'px-4 py-2 rounded font-medium transition-colors'
  const variantStyles = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300'
  }

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${baseStyles} ${variantStyles[variant]} ${
        disabled ? 'opacity-50 cursor-not-allowed' : ''
      }`}
    >
      {children}
    </button>
  )
}

生产清单

[ ] 默认使用函数组件
[ ] 自定义钩子用于可重用逻辑
[ ] 定义状态管理策略（useState、useReducer、Context）
[ ] 实施性能优化（useMemo、useCallback、React.memo）
[ ] 添加错误边界
[ ] 配置TypeScript严格模式
[ ] 使用React Testing Library测试组件
[ ] 在useEffect中正确清理
[ ] 使用组合模式制作可重用组件
[ ] 避免反模式
[ ] 正确实现表单处理
[ ] 长列表虚拟化
[ ] 监控性能指标
[ ] 考虑可访问性（键盘导航、ARIA）
[ ] 实施代码分割和懒加载
[ ] 优化捆绑包大小

反模式

直接变异状态：直接变异导致错误和不可预测的行为
缺少依赖项：在useEffect中缺少依赖项会导致陈旧的闭包
过度优化：过度优化增加了复杂性而没有好处
组件设计不良：没有使组件可重用和可组合
忽视可访问性：不考虑可访问性限制了用户基础
复杂状态：使用过于复杂的状态使代码难以维护
属性钻取：过度的属性钻取使组件难以使用
不使用TypeScript：缺少类型安全会导致运行时错误
大型组件：过大的组件难以理解和测试
在渲染中使用副作用：在渲染中使用副作用会导致错误

集成点

React：核心React库
TypeScript：类型安全和接口
测试库：@testing-library/react用于组件测试
React Query：服务器状态管理
Zustand：客户端状态管理
React Hook Form：表单状态管理
nextjs-patterns用于Next.js模式
state-management用于状态管理选项
error-boundaries-react用于错误处理
accessibility用于可访问性指南

进一步阅读

React文档 - 官方React文档
React钩子 - 钩子参考
React测试库 - 测试库文档
React和TypeScript - TypeScript备忘单
React性能 - 渲染和提交
React最佳实践 - React常见问题解答
Clean Code React - 清洁代码原则
React模式 - React设计模式