SuperAPI AI 工具集

react-best-practices

前端与建站

查看项目

更新于 10-15 20:10

技能介绍

用途:本技能用于在编写或审查 React 组件、Hook、Effect、数据加载与表单代码时,提供一套关于状态归属与数据流的约定,把 React 视为对自有状态的声明式投影:能计算的就推导,每个状态都显式渲染,Effect 仅用于与外部系统同步。

主要能力与约定: 状态管理:可变状态收窄持有,输入已能证明的值一律推导,避免可计算值进入 state 而产生漂移;把可变状态放在最小的共享所有者处,仅在有兄弟消费者时上提;互斥 UI 模式用单一合法状态集合表示,而非多个互相矛盾的标志;由同一状态派生的转换使用函数式更新,使排队转换可组合且回调不捕获渲染快照;领域标识变化时通过重新挂载开启新的状态生命周期,而非用字段级重置 effect;需要丢弃子组件本地状态、焦点等时用条件挂载移除隐藏 UI。 渲染与组合:显式渲染状态,围绕各自拥有的契约组合组件;JSX 缺失与分支条件要显式书写,不依赖真值判断;仅当某子系统拥有跨多层消费的状态或行为时才建立 context 所有权;原生元素 props 保留完整平台契约,不维护不完整的自写 prop 面;被动布局内容用 children 组合表达,render 回调留给所有者提供的行为。 Effect 与记忆化:Effect 仅用于响应式外部系统同步;把每次纯渲染期计算中复杂度高于 O(1) 的部分都做记忆化,O(1) 推导保持内联;用原子记忆化拆分独立缓存,避免无关输入互相失效;同步值在渲染期计算而非用派生状态 effect,防止中间 UI 陈旧与第二个可写真源;事件工作在接收动作的处理器中完成,不绕经 state 和 effect;有序工作在单个事件、查询或服务操作所有者中完成,避免 effect 链掩盖顺序与失败。 表单:把表单输入与提交状态视为表单级契约;在表单边界先解码再校验,使变更操作不接触原始传输输入;pending、success、failure 建模为表单级操作,而非某个按钮的状态;除非不同按钮选择操作,否则缺失提交者身份视为合法,需区分时按表单输入校验,而非抛错或臆造默认值。

参考资料:涉及 React 时可用 Context7(库 ID /facebook/react)查最新文档,用 DeepWiki(仓库 ID react/react)查实现细节;写或审查相关代码前先阅读适用当前任务的参考条目。

限制:资料未提供具体安装命令、收费方式、支持平台及版本要求,暂未提供;本技能不提供可直接复制的完整代码示例,需结合项目实际与官方文档使用。