用途:面向 gitbutler 仓库 apps/lite 的 React 代码,处理在渲染期间派生值、新增或消费 context、订阅 redux store 或查询,以及排查渲染性能回归的场景。
主要能力与要点:
- 派生值与查询。react-query 的结果应在 query 的 select 中派生,缓存键为 (data, select 函数标识);useQueries/useSuspenseQueries 可用 combine 折叠结果。注意闭包捕获的依赖若每次渲染重建,只是把问题上移。redux 派生集合应使用 createSelector,而非返回新数组/对象的普通函数。
- context。use(SomeContext) 在值标识变化时重渲染所有消费者,无法只订阅某一片;应让消费者订阅更窄的值。逐行状态应使用返回原始值(通常为布尔)的窄 useAppSelector。需要大对象解析的值应在顶层解析一次并存储。
- 标识纪律。reducer 在无实际变更时应提前返回;事件回调中读取 store 可用 useAppStore() 取 store 后在回调调用 getState(),不必订阅;useMutation 结果应解构(如 const { isPending, mutate } = ...);必要时可调整 hook 调用顺序以影响编译器记忆化。
验证方式:通过 CDP 驱动开发应用(pnpm dev 启动 vite 5173 与 Electron --remote-debugging-port=9222),可 fetch 经 vite 转换的模块读取编译器输出,或用 babel-plugin-react-compiler 离线转换。也可挂接 React DevTools 的 onCommitFiberRoot 记录每次提交的 actualDuration。
限制与注意:不要仅凭源码判断是否已记忆化,需读编译器输出;不要在组件或 hook 内添加 window.* 探针写入,否则会破坏记忆化;测量完成后应还原 onCommitFiberRoot;Electron 主进程改动仅在启动时编译,需重启 pnpm dev;store/redux 模块改动会整页重载并清空 window 状态。该技能的具体版本、平台与收费信息暂未提供。