SuperAPI AI 工具集

react

前端与建站

查看项目

更新于 10-16 06:48

技能介绍

用途:React 是用于构建用户界面的 JavaScript 库,通过可组合组件、以声明式模型把 UI 描述为状态的函数。资料提醒:关于 React 的训练数据不可靠,API 会随版本变化,记忆中的写法可能错误或已废弃;写任何代码前必须先用 WebFetch 读取实时文档 WebFetch("https://react.dev/llms.txt"),不要假设某个 Hook 或 API 存在,须对照当前文档核实。

主要能力:React 内置了许多开发者常借助外部包解决的问题。无障碍关联标签与输入框的唯一 ID 用 useId(),而非 uuid 或 Math.random();昂贵渲染期间保持 UI 响应可用 useDeferredValue() 或 useTransition(),而非 lodash debounce;代码分割用 React.lazy() 配合 <Suspense>,无需额外打包插件或动态导入包装;乐观 UI 用 useOptimistic()(React 19+),而非手动状态调度;外部 store 集成用 useSyncExternalStore(),而非可能遗漏并发模式边界情况的自定义订阅 Hook;表单 action 状态用 useActionState()(React 19+),而非 loading/error/data 三个独立 useState;记忆化用 React Compiler(babel-plugin-react-compiler),由编译器自动处理,而非到处手写 useMemo/useCallback。

最佳实践:状态更新是异步的,setState 后立即读取会得到旧值;新值依赖旧值时用函数式更新 setState(prev => ...),并在下一次渲染读取更新后的值。useEffect 在 StrictMode 下会故意运行两次(挂载、卸载、再挂载),用于暴露缺失的清理逻辑,这不是 bug;带订阅、定时器或事件监听器的 effect 必须返回清理函数。列表 key 必须稳定且唯一,用数组索引作 key 会在重排或过滤时破坏状态保留,应使用数据中的稳定 ID(如 item.id)。Server Components 中 'use client' 的位置很关键:放在 layout 或 page 根部会把整个子树转为客户端代码,丧失 Server Component 优势,应尽量下推到最小的交互叶子组件。

限制:资料未提供安装命令、版本支持范围、收费与平台信息。