SuperAPI AI 工具集

react-hook-authoring

前端与建站

查看项目

更新于 10-15 20:05

技能介绍

用途:为 React 19 组件库编写、评审和设计自定义 Hook 提供原则,目标是让使用这些 Hook 的开发者无需关心记忆化(memoization)。

核心原则:先不写记忆化,只有性能分析器显示问题时才添加。默认 Hook 每次渲染返回普通函数,这对绝大多数场景已足够;稳定性由使用方在需要时自行负责(例如对 context value 使用 useMemo)。

决策要点:返回函数时默认不用 useCallback、useRef、useMemo;若 setValue 进入多消费者 context 且分析显示多余重渲染,才用 useLayoutEffect + useRef + useCallback([]),并需要 "use client";Hook 接受使用方回调(如 onChange、onSuccess、onError)时,绝不要求使用方 useCallback,可在内部用 ref 保存;使用 useSyncExternalStore 时 subscribe 必须稳定,需 useCallback;为 context provider 编写时,对 value 对象用 useMemo 合理,多消费者时 value 中的函数应稳定。

反模式:过早 useCallback(依赖不稳定时整条链失效);在状态更新函数中产生副作用(Strict Mode 会调用两次);渲染期间写 ref(并发模式有撕裂风险,应改用 useLayoutEffect);强迫使用方记忆化;过度设计受控/非受控逻辑。

useMemo 合理场景:context value 对象、可测量的重计算、useEffect 依赖中的对象/数组。不合理场景:原始值、仅渲染时读取的对象、预防性记忆化。

限制:资料未提供安装命令、版本兼容细节或完整代码示例,仅给出原则与模式说明。