⚡

React19模式指南Skill react-19-patterns

React 19模式全面指南，包含服务器组件、客户端组件、Suspense、流式渲染、钩子使用、TypeScript集成、最佳实践和迁移方案。关键词：React 19, 服务器组件, 客户端组件, Suspense, 流式渲染, TypeScript, 钩子, 前端开发, 最佳实践, 迁移指南

前端开发 0 次安装 0 次浏览 更新于 3/2/2026

name: react-19-patterns description: 全面的React 19模式，包含所有钩子、服务器/客户端组件、Suspense、流式渲染和过渡。确保使用TypeScript正确使用React 19。 allowed-tools: Read, Grep, Glob, WebFetch, Bash

React 19模式 - 全面指南

何时使用此技能

在以下情况下使用此技能：

  • 编写React组件（服务器或客户端）
  • 使用React钩子（标准或新的React 19钩子）
  • 使用服务器操作实现表单
  • 使用Suspense和流式渲染
  • 管理状态和过渡
  • 乐观UI更新
  • 从React 18迁移到React 19

此技能涵盖内容

核心模式

  • 服务器与客户端组件 - 完整的决策树
  • 所有React钩子 - 包含TypeScript的完整参考
  • Suspense模式 - 边界、流式渲染、错误处理
  • 服务器组件 - 数据获取、缓存、组合
  • 客户端组件 - 交互性、状态、副作用
  • 过渡 - useTransition、startTransition、isPending
  • 流式渲染 - 渐进式渲染模式
  • 迁移指南 - React 18 → React 19

React 19新特性

  • use() - 用于组件中的异步数据
  • useOptimistic() - 用于乐观UI更新
  • useFormStatus() - 用于表单提交状态
  • useActionState() - 用于服务器操作状态
  • 增强的useTransition() - 更好的性能
  • 改进的错误边界
  • 更好的水合

快速参考

服务器组件模式

// ✅ 默认 - 异步数据获取
export default async function ProjectsPage() {
  const projects = await db.project.findMany()
  return <ProjectList projects={projects} />
}

客户端组件模式

// ✅ 使用'use client'实现交互性
'use client'

import { useState } from 'react'

export function InteractiveComponent() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

新的React 19钩子模式

'use client'

import { useOptimistic } from 'react'

export function TodoList({ todos }: Props) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo: string) => [...state, { id: 'temp', text: newTodo, pending: true }]
  )

  return (
    <form action={async (formData) => {
      addOptimisticTodo(formData.get('todo'))
      await createTodo(formData)
    }}>
      <input name="todo" />
      <button type="submit">Add</button>
    </form>
  )
}

文件结构

此技能组织为详细指南：

  1. server-vs-client.md - 组件类型决策树
  2. hooks-complete.md - 包含TypeScript的所有React钩子
  3. suspense-patterns.md - Suspense边界和流式渲染
  4. server-components-complete.md - 服务器组件模式
  5. client-components-complete.md - 客户端组件模式
  6. transitions.md - useTransition和并发特性
  7. streaming-patterns.md - 渐进式渲染
  8. migration-guide.md - React 18 → 19迁移
  9. validate-react.py - React规则验证工具

决策流程

开始：创建新组件
│
├─ 是否需要交互性（onClick、onChange）？
│  ├─ 是 → 阅读client-components-complete.md
│  └─ 否 → 继续
│
├─ 是否需要React钩子（useState、useEffect）？
│  ├─ 是 → 阅读client-components-complete.md + hooks-complete.md
│  └─ 否 → 继续
│
├─ 是否获取数据？
│  ├─ 是 → 阅读server-components-complete.md
│  └─ 否 → 继续
│
└─ 默认 → 服务器组件（阅读server-components-complete.md）

需要特定钩子帮助？
└─ 阅读hooks-complete.md（完整参考）

需要Suspense/流式渲染？
└─ 阅读suspense-patterns.md + streaming-patterns.md

需要乐观UI？
└─ 阅读hooks-complete.md（useOptimistic部分）

需要表单处理？
└─ 阅读hooks-complete.md（useFormStatus、useActionState）

从React 18迁移？
└─ 阅读migration-guide.md

防止的常见错误

❌ 异步客户端组件

'use client'
export default async function Bad() {} // 错误！

✅ 使用服务器组件或useEffect

// 选项1：服务器组件
export default async function Good() {} // ✅

// 选项2：客户端使用useEffect
'use client'
export default function Good() {
  useEffect(() => {
    fetchData()
  }, [])
}

❌ 条件中的钩子

if (condition) {
  useState(0) // 错误：违反钩子规则
}

✅ 顶层的钩子

const [value, setValue] = useState(0)
if (condition) {
  // 在此处使用钩子结果
}

❌ 服务器组件中的浏览器API

export default function Bad() {
  const data = localStorage.getItem('key') // 错误！
  return <div>{data}</div>
}

✅ 使用客户端组件

'use client'
export default function Good() {
  const [data, setData] = useState(() =>
    localStorage.getItem('key')
  )
  return <div>{data}</div>
}

验证

使用validate-react.py检查您的React代码：

# 验证单个文件
python .claude/skills/react-19-patterns/validate-react.py src/components/Button.tsx

# 验证目录
python .claude/skills/react-19-patterns/validate-react.py src/components/

# 自动修复（可能的情况下）
python .claude/skills/react-19-patterns/validate-react.py --fix src/components/

检查内容：

  • 钩子规则违规
  • 服务器/客户端组件错误
  • 缺少’use client’指令
  • 无效的异步客户端组件
  • 服务器组件中的浏览器API使用
  • 客户端组件的非可序列化props

最佳实践

  1. 默认使用服务器组件

    • 更好的性能（无JS发送到客户端）
    • 直接数据访问
    • SEO友好

  2. 谨慎使用客户端组件

    • 仅在需要交互性时使用
    • 保持小巧
    • 最小化包大小

  3. 组合服务器+客户端

    • 在服务器组件中获取数据
    • 作为props传递给客户端组件
    • 两全其美

  4. 使用新的React 19钩子

    • use()用于异步数据
    • useOptimistic()用于即时反馈
    • useFormStatus()用于表单状态
    • useActionState()用于服务器操作

  5. 利用Suspense

    • 渐进式流式传输数据
    • 更好的感知性能
    • 并行数据加载

资源

快速链接

最后更新：2025-11-23 React版本：19.2.0 Next.js版本：15.5