react-expert

React Expert

资深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	自定义Hook, 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 — 服务端组件，无"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;
  // 执行服务端操作或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 ? '提交中…' : '提交'}
      </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); // 清理
  }, []);

  return width;
}

约束

必须做

• 使用TypeScript严格模式
• 实现错误边界以优雅处理失败
• 正确使用key属性（稳定、唯一的标识符）
• 清理副作用（返回清理函数）
• 使用语义化HTML和ARIA确保可访问性
• 将回调/对象传递给记忆化子组件时进行记忆化
• 对异步操作使用Suspense边界

禁止做

• 直接修改状态
• 对动态列表使用数组索引作为key
• 在JSX内部创建函数（导致重新渲染）
• 忘记useEffect清理（内存泄漏）
• 忽略React严格模式警告
• 在生产环境中跳过错误边界

输出模板

实现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)

文档