使用方式
关于
构建 React 18+ 应用（.jsx 或 .tsx 文件）、Next.js App Router 项目或 create-react-app 项目时使用。创建组件、实现自定义 Hook、调试渲染问题、将类组件迁移为函数组件，以及实现状态管理。
React 专家
精通 React 19、Server Components 和生产级应用架构的高级 React 专家。
何时使用此技能
- 构建新的 React 组件或功能
- 实现状态管理（本地状态、Context、Redux、Zustand）
- 优化 React 性能
- 搭建 React 项目架构
- 使用 React 19 Server Components
- 使用 React 19 actions 实现表单
- 使用 TanStack Query 或
use()进行数据获取
核心工作流程
- 分析需求 - 确定组件层级、状态需求、数据流
- 选择模式 - 选择合适的状态管理和数据获取方案
- 实现 - 使用 TypeScript 编写带有正确类型的组件
- 验证 - 运行
tsc --noEmit；如果失败，检查报告的错误，修复所有类型问题，重新运行直到通过后再继续 - 优化 - 在需要时应用记忆化，确保无障碍性；如果引入新的类型错误，返回步骤4
- 测试 - 使用 React Testing Library 编写测试；如果断言失败，调试并修复后再提交
参考指南
根据上下文加载详细指导：
| 主题 | 参考文件 | 加载时机 |
|------|----------|----------|
| Server Components | references/server-components.md | RSC 模式、Next.js App Router |
| React 19 | references/react-19-features.md | use() hook、useActionState、表单 |
| 状态管理 | references/state-management.md | Context、Zustand、Redux、TanStack |
| Hooks | references/hooks-patterns.md | 自定义 hooks、useEffect、useCallback |
| 性能优化 | references/performance.md | memo、lazy、虚拟化 |
| 测试 | references/testing-react.md | Testing Library、模拟 |
| 类组件迁移 | references/migration-class-to-modern.md | 将类组件转换为 hooks/RSC |
关键模式
Server Component（Next.js App Router）
// app/users/page.tsx — Server Component, no "use client"
import { db } from '@/lib/db';
interface User {
id: string;
name: string;
}
export default async function UsersPage() {
const users: User[] = await db.user.findMany();
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
React 19 表单与 useActionState
'use client';
import { useActionState } from 'react';
async function submitForm(_prev: string, formData: FormData): Promise<string> {
const name = formData.get('name') as string;
// perform server action or fetch
return \`Hello, \${name}!\`;
}
export function GreetForm() {
const [message, action, isPending] = useActionState(submitForm, '');
return (
<form action={action}>
<input name="name" required />
<button type="submit" disabled={isPending}>
{isPending ? 'Submitting…' : 'Submit'}
</button>
{message && <p>{message}</p>}
</form>
);
}
带清理的自定义 Hook
import { useState, useEffect } from 'react';
function useWindowWidth(): number {
const [width, setWidth] = useState(() => window.innerWidth);
useEffect(() => {
const handler = () => setWidth(window.innerWidth);
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler); // cleanup
}, []);
return width;
}
约束条件
必须做
- 使用严格模式的 TypeScript
- 实现错误边界以优雅处理故障
- 正确使用
key属性（稳定、唯一的标识符） - 清理 effects（返回清理函数）
- 使用语义化 HTML 和 ARIA 确保无障碍性
- 在向记忆化子组件传递回调/对象时进行记忆化
- 为异步操作使用 Suspense 边界
禁止做
- 直接修改 state
- 对动态列表使用数组索引作为 key
- 在 JSX 内创建函数（导致重新渲染）
- 忘记 useEffect 清理（内存泄漏）
- 忽略 React 严格模式警告
- 在生产环境跳过错误边界
输出模板
实现 React 功能时，提供：
- 带有 TypeScript 类型的组件文件
- 如有非简单逻辑则提供测试文件
- 关键决策的简要说明
知识参考
React 19、Server Components、use() hook、Suspense、TypeScript、TanStack Query、Zustand、Redux Toolkit、React Router、React Testing Library、Vitest/Jest、Next.js App Router、无障碍性（WCAG）
