SuperAPI AI 工具集

react-patterns

前端与建站

查看项目

更新于 10-16 08:43

技能介绍

用途:帮助开发者写出符合 React 官方心智模型的惯用代码,在编写或审查 React 组件、修复 hooks 或渲染纯净性相关 lint 错误、以及决定逻辑放置位置(渲染、effect 还是事件处理)时使用。

主要能力与原则:

  1. 渲染必须纯净:渲染期间不产生副作用,相同 props 与 state 应得到相同输出。例如用 useState(() => Date.now()) 在挂载时计算一次,而非每次渲染调用 Date.now()。
  2. Effect 用于外部同步:effect 用于连接 React 与外部系统(API、DOM、订阅),不用于派生状态。派生值应在渲染中直接计算,或在改变源值的事件处理中更新。
  3. 尊重生命周期:挂载时组件出现并运行 effect,更新时 props/state 变化触发重渲染,卸载时组件消失并执行清理。订阅类 effect 必须返回清理函数。
  4. 选对 hook:useState 用于触发重渲染的状态;useEffect 用于与外部系统同步;useRef 用于不触发重渲染的可变持久值;useMemo 用于缓存昂贵计算;useCallback 用于为子组件提供稳定函数引用。

反模式:不要与 React 对抗,感觉别扭通常意味着写法有误;不要忽略 linter;不要把一切逻辑塞进 effect,多数逻辑属于渲染或事件处理;不要忘记清理订阅、定时器与事件监听。状态同步反模式包括在 effect 中做 state 到 state 的同步,以及子组件通过 effect 更新父组件状态,这些会带来额外渲染并让数据流难以追踪。

限制:资料未提供安装命令、具体版本要求、平台或收费信息。