SuperAPI AI 工具集

react-19

前端与建站

查看项目

更新于 10-15 14:51

技能介绍

本技能用于指导在 React 19 配合 React Compiler 的项目中编写组件,给出一组必须遵守的编码约定。

用途 在编写 React 组件时应用 React 19 的新模式,避免使用已不再需要的手动优化手段,并统一导入、组件类型与状态处理方式。

主要能力与规则

  1. 禁止手动记忆化(必需):由 React Compiler 自动处理优化,直接书写过滤、排序等派生计算和事件处理函数即可;明确禁止使用 useMemo 与 useCallback 进行手动记忆化。
  2. 导入方式(必需):始终使用具名导入,例如从 "react" 导入 useState、useEffect、useRef;禁止使用 import React from "react" 或 import * as React from "react"。
  3. 服务端组件优先:默认使用服务端组件(不加指令),可直接使用 async 函数组件并 await 获取数据;仅在需要时使用客户端组件。
  4. "use client" 的使用时机:涉及 useState、useEffect、useRef、useContext,事件处理器(onClick、onChange),以及浏览器 API(window、localStorage)时使用。
  5. use() Hook:可从 "react" 导入 use,用于读取 promise(在解析完成前挂起),也可用于条件式读取 context(这是 useContext 无法做到的)。
  6. Actions 与 useActionState:使用 "use server" 定义服务端 action,配合 useActionState 获取状态、action 与 isPending,实现表单提交与待处理状态展示。
  7. ref 作为 prop:React 19 中 ref 就是普通 prop,可直接在函数组件参数中接收并传递,不再需要 forwardRef。

使用方式 该技能以规则与代码示例的形式给出,在编写 React 组件时按上述约定执行:不写 useMemo/useCallback,使用具名导入,默认服务端组件,按需添加 "use client",并采用 use()、useActionState 与 ref prop 等新写法。

适用场景 适用于使用 React 19 并启用 React Compiler 的前端项目,尤其是需要统一团队编码风格、迁移旧写法(如 forwardRef、手动记忆化)的场景。

限制 资料未提供该技能的安装方式、依赖要求、版本兼容范围、收费信息或具体平台支持情况,这些内容暂未提供。