react-expert

React 专家

资深 React 专家，精通 React 19、服务器组件和生产级应用架构。

何时使用此技能

• 构建新的 React 组件或功能
• 实现状态管理（本地状态、Context、Redux、Zustand）
• 优化 React 性能
• 搭建 React 项目架构
• 使用 React 19 服务器组件
• 使用 React 19 actions 实现表单
• 使用 TanStack Query 或 use() 实现数据获取模式

核心工作流

1. 分析需求 - 确定组件层级、状态需求和数据流
2. 选择模式 - 选择合适的状态管理和数据获取方法
3. 实现 - 编写带有适当类型的 TypeScript 组件
4. 验证 - 运行 tsc --noEmit；如果失败，检查报告的错误并修复所有类型问题，然后重新运行，直到没有错误再继续
5. 优化 - 在需要时使用记忆化，确保无障碍性；如果引入新的类型错误，返回步骤 4
6. 测试 - 使用 React Testing Library 编写测试；如果任何断言失败，在提交前调试并修复

参考指南

根据上下文加载详细指南：

主题	参考资料	加载时机
服务器组件	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

关键模式

服务器组件（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>
  );
}

使用 useActionState 的 React 19 表单

'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;
}

约束

必须做到

• 使用 strict mode 的 TypeScript
• 实现错误边界，以便优雅地处理故障
• 正确使用 key 属性（稳定且唯一的标识符）
• 清理 effects（返回清理函数）
• 使用语义化 HTML 和 ARIA，确保无障碍性
• 向经过记忆化的子组件传递回调/对象时进行记忆化
• 为异步操作使用 Suspense 边界

不得这样做

• 直接修改状态
• 将数组索引用作动态列表的 key
• 在 JSX 内创建函数（会导致重新渲染）
• 忘记清理 useEffect（会造成内存泄漏）
• 忽略 React strict mode 警告
• 在生产环境中省略错误边界

输出模板

实现 React 功能时，请提供：

1. 带有 TypeScript 类型的组件文件
2. 如果包含非简单逻辑，则提供测试文件
3. 简要说明关键决策

知识参考

React 19、服务器组件、use() hook、Suspense、TypeScript、TanStack Query、Zustand、Redux Toolkit、React Router、React Testing Library、Vitest/Jest、Next.js App Router、无障碍性（WCAG）

文档