用途:帮助开发者写出符合 React 官方心智模型的惯用代码,在编写或审查 React 组件、修复 hooks 或渲染纯净性相关 lint 错误、以及决定逻辑放置位置(渲染、effect 还是事件处理)时使用。
主要能力与原则:
- 渲染必须纯净:渲染期间不产生副作用,相同 props 与 state 应得到相同输出。例如用 useState(() => Date.now()) 在挂载时计算一次,而非每次渲染调用 Date.now()。
- Effect 用于外部同步:effect 用于连接 React 与外部系统(API、DOM、订阅),不用于派生状态。派生值应在渲染中直接计算,或在改变源值的事件处理中更新。
- 尊重生命周期:挂载时组件出现并运行 effect,更新时 props/state 变化触发重渲染,卸载时组件消失并执行清理。订阅类 effect 必须返回清理函数。
- 选对 hook:useState 用于触发重渲染的状态;useEffect 用于与外部系统同步;useRef 用于不触发重渲染的可变持久值;useMemo 用于缓存昂贵计算;useCallback 用于为子组件提供稳定函数引用。
反模式:不要与 React 对抗,感觉别扭通常意味着写法有误;不要忽略 linter;不要把一切逻辑塞进 effect,多数逻辑属于渲染或事件处理;不要忘记清理订阅、定时器与事件监听。状态同步反模式包括在 effect 中做 state 到 state 的同步,以及子组件通过 effect 更新父组件状态,这些会带来额外渲染并让数据流难以追踪。
限制:资料未提供安装命令、具体版本要求、平台或收费信息。