React Dev 说明文档

# React TypeScript 开发技能 ## 目的 `react-dev` 技能为构建类型安全的 React 应用程序提供了全面的 TypeScript 模式和最佳实践。它是现代 React TypeScript 开发的完整参考，涵盖了 React 18-19 的特性，包括服务端组件、类型安全路由和正确的事件处理。 此技能旨在通过提供编译时保证、可靠的重构和生产就绪的模式，在运行时之前捕获错误，从而消除 React 开发中对 TypeScript 的猜测。 ## 何时使用 在进行以下工作时激活此技能： - **构建类型化的 React 组件** - 使用正确的 TypeScript 类型创建新组件 - **实现泛型组件** - 适用于任何数据类型的表格、列表、模态框、表单字段 - **类型化事件处理程序和表单** - 鼠标事件、表单提交、输入更改、键盘事件 - **使用 React 19 特性** - Actions、服务端组件、`use()` 钩子、`useActionState` - **路由集成** - 具有类型安全的 TanStack Router 或 React Router v7 - **自定义钩子的正确类型化** - 创建具有正确返回类型的可重用钩子 - **迁移到 React 19** - 理解破坏性变更和新模式 **触发短语：** - "构建一个类型化的 React 组件" - "类型化此事件处理程序" - "创建一个泛型表格/列表/模态框" - "使用 React 19 服务端组件" - "使用 TanStack/React Router 进行类型安全路由" - "我该如何类型化这个钩子？" - "React TypeScript 最佳实践" **不适用于：** - 非 React 的 TypeScript 项目 - 原生 JavaScript React（无 TypeScript） - React Native 特有模式 ## 工作原理 该技能提供渐进式的 React TypeScript 知识披露： 1. **核心模式立即加载** - 组件 Props、事件处理程序、钩子类型化 2. **按需引用高级模式** - 泛型组件、服务端组件、路由 3. **深度参考文件** - 仅在需要时加载详细示例和边缘情况 4. **React 19 迁移指南** - 明确标记破坏性变更和新 API 该技能结构如下： - **快速参考部分** - 可立即复制的通用模式 - **详细参考文件** - 深入的示例和解释 - **规则和反模式** - 始终要做和绝对不要做的事情 - **版本特定指南** - 突出显示 React 18 与 React 19 的差异 ## 关键特性 ### 1. React 19 破坏性变更 涵盖所有主要 b