# 反应打字稿使用 TypeScript 5.9 构建类型安全的 React 19.2 应用程序的模式。 React Compiler 自动处理记忆 - 编写简单的组件，让工具优化。 ## 关键规则 ### 没有forwardRef - ref 现在是一个 Prop // 错误 - 已弃用的模式 const 输入 =forwardRef((props, ref) => ( ）） // 正确 - React 19：ref 是常规 prop 函数输入({ ref, ...props }: React.ComponentProps<"input">) { 返回 } ### 使用 React 编译器无需手动记忆 // 错误 - React 编译器不需要 const MemoizedList = memo(function List({ items }: { items: Item[] }) { const Sorted = useMemo(() => items.toSorted(比较), [items]) const handleClick = useCallback((id: string) => onSelect(id), [onSelect]) 返回sorted.map(item => handleClick(item.id)} />) }) // 正确 - React 编译器自动记忆所有这些 function List({ items, onSelect }: { items: Item[]; onSelect: (id: string) => void }) { const Sorted = items.toSorted(比较) 返回sorted.map(item => onSelect(item.id)} />) } ### 使用 `React.ComponentProps<>` 作为元素属性 // 错误 - 手动输入 HTML 属性接口 ButtonProps { onClick?: (e: MouseEvent) => void 禁用？：布尔值子级：React.ReactNode 类名？：字符串 } // 正确 - 扩展原生元素 props 类型 ButtonProps = React.ComponentProps<"button"> & { 变体？：“主要”| “鬼” } ### 输入状态受歧视的联合，而不是布尔值 // 错误 - 不可能的状态可能接口 RequestState { isLoading: boolean;错误：字符串|无效的;数据：用户|空 } // 正确 - 受歧视的联合可以防止不可能的状态输入请求状态= | { 状态：“空闲” } | { 状态：“加载中” } | { 状态：“错误”；错误：字符串} | { 状态：“成功”；数据：用户} ### 使用 `satisfies` 来实现类型安全的文字 // 错误 - 扩展为 Record const 路线： Record = { home: { path: "/" }, about: { path: "/about" } } // 正确 - 在检查形状时保留文字键常量路由 = { 家：{路径：“/”}，关于：{路径：“/about”}， } 满足 Record routes.home // 输入，自动完成工作 ### 上下文必须有严格的默认值，否则抛出异常 // 错误 - 没有保护的 null 默认值 const AuthContext = createContext(空) // 消费者每次都必须进行空检查 // 正确 - 抛出缺失提供者的工厂钩子 const AuthContext = createContext(空) 函数 useAuth(): AuthState { const ctx = 使用（AuthContext） if (ctx === null) throw new Error("useAuth 必须在 AuthProvider 中使用") 返回ctx } ### 更喜欢 `use()` 而不是 `useContext()` // 旧模式函数头（）{ const theme = useContext(ThemeContext) // 提前返回后无法使用 if (!isVisible) 返回 null 返回

标题

} // 正确 - React 19：use() 在提前返回后起作用函数标头({ isVisible }: { isVisible: boolean }) { if (!isVisible) 返回 null const theme = use(ThemeContext) // 在这里工作 - use() 不受钩子规则的约束返回

标题

} ## React 19 种模式 ### 组件创作带有用于样式挂钩的“数据槽”的普通函数。没有“forwardRef”，没有“FC”：类型 CardProps = React.ComponentProps<"div"> & { 变体？：“升高”| “概述” } function Card({variant = "outlined", className, ...props }: CardProps) { 返回（

） } function CardTitle({ className, ...props }: React.ComponentProps<"h3">) { return

} ### 操作和 useTransition 转换中的异步函数会自动处理挂起状态、错误和表单重置：函数 UpdateProfile({ userId }: { userId: string }) { const [错误，submitAction，isPending] = useActionState( async (_prev: string | null, formData: FormData) => { const 结果 = 等待 updateProfile(userId, formData) if (结果.错误) 返回结果.错误重定向（“/个人资料”）返回空值 }, 空）返回（ <表单操作={submitAction}> <按钮类型=“提交”禁用= {isPending}> {正在等待？ “正在保存...”：“保存”} {错误&&
{错误}
} ） } useTransition 用于非表单操作：函数DeleteButton({ onDelete }: { onDelete: () => Promise }) { const [isPending, startTransition] = useTransition() 返回（ <按钮已禁用={正在等待} onClick={() => startTransition(async () => { 等待 onDelete() })} > {正在等待？ “删除...”：“删除”} ） } 使用Optimistic获得即时反馈： function LikeButton({ likes, onLike }: { likes: number; onLike: () => Promise }) { const [optimisticLikes, addOptimisticLike] = useOptimistic(喜欢, (prev) => prev + 1) const handleLike = async () => { 添加乐观喜欢（空）等待 onLike() } 返回（ <表单操作={handleLike}> ） } ### use() 钩子阅读渲染中的承诺和上下文。在提前返回后有条件地工作： // 读取承诺 - 暂停直到解决函数 Comments({ commentsPromise }: { commentsPromise: Promise }) { const 评论 = use(commentsPromise) 返回（
{comments.map(c =>
{c.text}
)}
） } // 父级从加载器/缓存获取承诺，而不是在渲染期间创建函数 PostPage({ commentsPromise }: { commentsPromise: Promise }) { 返回（ <悬念后备={<骨架/>}> <评论 commentsPromise={commentsPromise} /> ） } // 有条件地读取上下文函数 AdminPanel({ user }: { user: User | null }) { if (!user) 返回 const requests = use(PermissionsContext) // 合法 - use() 在提前返回后有效 if (!permissions.isAdmin) 返回返回<仪表板用户={用户}权限={权限}/> } 重要提示： `use()` 不支持渲染期间创建的 Promise。传递来自加载器、服务器函数或缓存源的承诺。 ### 活动组件（React 19.2）保留隐藏 UI 的状态。隐藏的子项保留其状态和 DOM 但卸载效果：从“反应”导入{ Activity，useState } 函数 TabLayout({ tabs }: { tabs: TabConfig[] }) { const [activeTab, setActiveTab] = useState(tabs[0].id) 返回（
<导航> {tabs.map(选项卡 => ( <按钮 key={tab.id} onClick={() => setActiveTab(tab.id)}> {标签.标签} ))} {tabs.map(选项卡 => ( <活动键={tab.id} 模式={activeTab === tab.id ? “可见”：“隐藏”}> ))}
） } 关键行为： * `visible` \- 正常渲染，安装效果 * `hidden` \- 通过 `display: none` 隐藏，效果清理，状态保留，更新延迟 * 预渲染：`` 将子项渲染为低优先级，以便将来更快地显示 * DOM 副作用（视频、音频）在隐藏时仍然存在 - 添加 `useLayoutEffect` 清理 ### useEffectEvent (React 19.2) 从效果中提取非反应性逻辑。事件函数始终会看到最新的道具/状态，而不会触发效果重新运行： function ChatRoom({ roomId, theme }: { roomId: string; theme: string }) { const onConnected = useEffectEvent(() => { showNotification("Connected!", theme) // 始终读取最新主题 }) 使用效果（（）=> { const 连接 = createConnection(roomId) 连接.on("已连接", () => onConnected()) 连接.connect() return () => 连接.disconnect() }, [roomId]) // 主题不在 deps 中 - onConnected 是一个效果事件 } 规则： * 仅从内部效果或其他效果事件调用 * 切勿传递给子组件或包含在依赖数组中 * 切勿在渲染期间调用 * 用于概念上是由效果触发的“事件”的逻辑定制挂钩图案：函数 useInterval(回调: () => void, 延迟: 数字 | null) { const onTick = useEffectEvent(回调) 使用效果（（）=> { if (delay === null) 返回 const id = setInterval(() => onTick(), 延迟) 返回（）=>清除间隔（id） }，[延迟]） } ### 文档元数据直接在组件中渲染 ``、`<meta>` 和 `<link>` - React 将它们提升到 `<head>`：函数 BlogPost({ post }: { post: Post }) { 返回（ <文章> <标题>{post.title}</标题> <meta name="description" content={post.excerpt} /> <meta name="author" content={post.author} /> <link rel="canonical" href={`https://example.com/posts/${post.slug}`} /> <h1>{帖子.标题}</h1> <div>{post.content}</div> </文章> ） } ### 上下文作为提供者 const ThemeContext = createContext<主题>("light") // React 19 - 直接使用 Context 作为提供者（无 .Provider）函数 App({ 孩子 }: { 孩子: React.ReactNode }) { 返回（ <主题上下文值=“暗”> {孩子} </主题上下文> ） } ### 引用清理函数函数测量框() { 返回（ <div ref={(节点) => { 如果（节点）{ const 观察者 = new ResizeObserver(handleResize) 观察者.观察（节点） return () =>observer.disconnect() // 卸载时清理 } }} /> ） } ## 反应编译器 ### 它的作用 React Compiler（`babel-plugin-react-compiler`）在构建时分析您的代码并自动插入记忆。在大多数情况下，它取代了手动的 `useMemo`、`useCallback` 和 `React.memo`。自动记忆： * 组件返回值（如果 props 不变则跳过重新渲染） * 组件内部计算成本高昂 * 回调函数作为 props 传递 * JSX元素创建 ### 设置（Vite） pnpm add -D babel-plugin-react-compiler // vite.config.ts 从“vite”导入{defineConfig} 从“@vitejs/plugin-react”导入反应导出默认的defineConfig({ 插件：[ 反应（{ 通天塔：{ plugins: ["babel-plugin-react-compiler"], // 必须是第一个 }, }), ], }) ### 不该做什么 // 不要 - 编译器处理这个 const MemoComponent = memo(MyComponent) const memoized = useMemo(() => 昂贵(数据), [数据]) const stableCallback = useCallback(() => 处理程序(id), [id]) // DO - 编写纯代码，编译器优化函数 MyComponent({ data, onSelect }: Props) { 常量处理 = 昂贵（数据）返回 <Child onClick={() => onSelect(data.id)} /> } ### 当手动记忆仍然适用时 * 当您需要精确控制效果何时触发时，`useMemo`/`useCallback` 作为效果依赖项 * 在许多组件之间共享的值（编译器记住每个组件，而不是全局） * 选择退出：`“use no memo”`指令跳过特定组件的编译 ### 验证经过编译器优化的组件在 React DevTools 中显示“Memo”徽章。检查构建输出中的“react/compiler-runtime”导入。 ## TypeScript 模式 ### React 的严格 tsconfig { “编译器选项”：{ “严格”：真实， “目标”：“esnext”， “模块”：“nodenext”， "moduleDetection": "强制", "jsx": "react-jsx", “verbatimModuleSyntax”：true， “isolatedModules”：正确， “noUncheckedIndexedAccess”：true， “exactOptionalPropertyTypes”：true， “noUncheckedSideEffectImports”：true， “skipLibCheck”：正确， “声明”：真实， “声明映射”：正确， “源地图”：正确， “类型”：[] } } ### 组件道具模式 // 扩展原生元素 props 类型 ButtonProps = React.ComponentProps<"button"> & { 变体？：“主要”| “次要” 正在加载？：布尔值 } 函数 Button({ 变体 = "primary", isLoading, Children, ...props }: ButtonProps) { 返回（ <按钮数据槽=“按钮”禁用= {isLoading || props.disabled} {...props}> {正在加载？ <旋转器/>：孩子} </按钮> ） } // 多态“as”属性类型 PolymorphicProps<E 扩展 React.ElementType> = { 作为？：E } & 省略<React.ComponentProps<E>, "as"> 函数 Text<E extends React.ElementType = "span">({ 作为， ...道具 }: PolymorphicProps<E>) { const 组件 = as || “跨度” 返回 <Component {...props} /> } // 用法： <Text as="h1">Hello</Text> ### 事件处理程序类型函数形式（）{ // 从处理程序上下文推断 - 不需要显式输入 const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault() const formData = new FormData(e.currentTarget) // 处理表单数据 } const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { console.log(e.target.value) } const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter") 提交() } 返回（ <form onSubmit={handleSubmit}> <input onChange={handleChange} onKeyDown={handleKeyDown} /> </形式> ） } ### 钩子类型 // useState - 在提供初始值时推断 const [count, setCount] = useState(0) // 数字 const [用户，setUser] = useState<用户 | null>(null) // 显式的 null init // useReducer - 可区分的联合操作输入反作用= | { 类型：“增量”；金额：数量 } | { 类型：“减量”；金额：数量 } | { 类型：“重置” } 函数 counterReducer（状态：数字，操作：CounterAction）：数字 { 开关（动作.类型）{ case "increment": 返回状态+action.amount 案例“减量”：返回状态 - action.amount 案例“重置”：返回0 } } const [计数，调度] = useReducer(counterReducer, 0) 调度（{ 类型：“增量”，金额：5 }） // useRef - 元素引用（React 19：返回 RefObject<T | null>，始终可为 null） const inputRef = useRef<HTMLInputElement>(null) // useRef - 可变值（无 null） const IntervalRef = useRef<数字 |未定义>（未定义） ### 通用组件类型 SelectProps<T> = { 项目：T[] 值：T onChange: (项目: T) => void getLabel: (项目: T) => 字符串 getKey: (项目: T) => 字符串 } 函数 Select<T>({ items, value, onChange, getLabel, getKey }: SelectProps<T>) { 返回（ <选择值={getKey(值)} onChange={(e) => { const item = items.find(i => getKey(i) === e.target.value) 如果（项目）onChange（项目） }} > {items.map(item => ( <选项键={getKey(item)} 值={getKey(item)}> {获取标签（项目）} </选项> ))} </选择> ） } // 用法 - T 推断为用户 <选择项目={用户} 值={选定的用户} onChange={setSelectedUser} getLabel={u => u.name} getKey={u => u.id} /> ### 组件状态的受歧视联盟类型 AsyncState<T> = | { 状态：“空闲” } | { 状态：“加载中” } | { 状态：“错误”；错误：错误} | { 状态：“成功”；数据：T} 函数 AsyncContent<T>({ 状态，渲染， }：{ 状态：AsyncState<T> 渲染：（数据：T）=> React.ReactNode }) { 开关（状态.状态）{ 情况“空闲”：返回 null 案例“正在加载”：返回<Spinner /> 案例“错误”：返回 <ErrorDisplay error={state.error} /> 案例“成功”：返回<> {render（state.data）} </> } } ### Zod v4 集成从“zod”导入{z} const UserSchema = z.object({ 名称：z.string().min(1), 电子邮件：z.string().email(), 角色： z.enum(["admin", "user", "viewer"]), }) type User = z.infer<UserSchema 类型> // 使用 useActionState 进行表单验证类型 FieldErrors = { 名称？: string[];电子邮件？：字符串[]；角色？: 字符串[] } 函数创建用户（）{ const [错误，submitAction，isPending] = useActionState( async (_prev: FieldErrors | null, formData: FormData) => { const 结果 = UserSchema.safeParse(Object.fromEntries(formData)) 如果（！结果。成功）{ // Zod v4：使用 z.flattenError() 获取字段级错误 const flat = z.flattenError(结果.error) 将 flat.fieldErrors 返回为 FieldErrors } 等待保存用户（结果.数据）返回空值 }, 空）返回（ <表单操作={submitAction}> <输入名称=“名称”/> {错误？.name && ( <span className="text-damage">{errors.name[0]}</span> )} <输入名称=“电子邮件”类型=“电子邮件”/> <选择名称=“角色”> <选项值=“用户”>用户</选项> <选项值=“admin”>管理员</选项> <选项值=“查看器”>查看器</选项> </选择> <button type=“submit”disabled={isPending}>创建</button> </形式> ） } ## 最佳实践 1. 组件的简单函数 \- 没有`FC`，没有`forwardRef`，没有`memo`。 “FC”在旧类型中隐式键入“children”，并且不会比普通函数签名添加任何值。让 React Compiler 进行优化。 2. `React.ComponentProps<"element">` 用于扩展原生元素 - 捕获所有 HTML 属性。 3. 状态的布尔值上的歧视联合 - 防止类型级别的不可能状态。 4. `use()` 优于 `useContext()` \ - 有条件地工作，更干净的上下文与警卫。 5. `satisfies` 对于配置对象 \- 在验证形状时保留文字类型。 6. 当状态保存很重要时（选项卡、侧边栏、向导），“活动”优于条件渲染。 7. `useEffectEvent` 过度抑制 deps \- 从效果中干净地提取非反应性逻辑。 8. 严格 tsconfig \- 启用 `noUncheckedIndexedAccess`、`exactOptionalPropertyTypes`、`verbatimModuleSyntax`。 9. `as const 满足` 对于路由配置、主题标记和查找对象。 10. 开关中的类型缩小 \- 在默认情况下通过“never”进行详尽的检查。 11. `import defer` (TS 5.9) - 推迟模块评估，直到延迟加载的重型模块的第一次属性访问。请参阅 [typescript-patterns.md](<https://github.com/tenequm/claude-plugins/blob/HEAD/skills/react-typescript/references/typescript-patterns.md>)。 ## 深入探讨 * [react-19-features.md](<https://github.com/tenequm/claude-plugins/blob/HEAD/skills/react-typescript/references/react-19-features.md>) \- 带有详细示例的完整 React 19/19.2 功能参考 * [typescript-patterns.md](<https://github.com/tenequm/claude-plugins/blob/HEAD/skills/react-typescript/references/typescript-patterns.md>) \- React 的高级 TypeScript 模式：泛型、实用程序类型、严格配置、类型级编程 ## 资源 * React 文档：<https://react.dev> * React 19.2 博客文章：<https://react.dev/blog/2025/10/01/react-19-2> * React 编译器 : <https://react.dev/learn/react-compiler> * TypeScript 5.9：<https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-9.html> * TypeScript 5.8：<https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-8.html> * React TypeScript 备忘单：<https://react-typescript-cheatsheet.netlify.app/></article></body></html>

反应打字稿

包含技能