人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载本文基于 ZCode 仓库内置的 Vercel React Best Practices 技能.agents/skills/react-best-practices/中rerender-dependencies规则展开系统讲解如何在 React 组件中通过窄化useEffect依赖来消除无意义的重跑将依赖数组中的对象替换为原始类型primitive并把派生布尔值放到 effect 之外计算。读完本文你将掌握依赖数组的引用比较原理、正误代码对照以及它与派生状态、事件处理器等配套规则的组合用法可直接用于 ZCode 桌面端与 Web 端 React 代码的审查与重构。一、规则在技能体系中的定位rerender-dependencies是 ZCode 仓库中 vendored 的 Vercel React Best Practices 技能的一个规则文件源码位于 rules/rerender-dependencies.md。该技能的完整说明见 SKILL.md该技能由 Vercel Engineering 维护共包含 70 条规则、横跨 8 个分类按优先级从 CRITICAL消除 Waterfall、包体积优化到 LOW高级模式排列用于指导 React / Next.js 代码的编写、审查与自动化重构规则文件本身以 YAML frontmatter 声明元信息title: Narrow Effect Dependencies、impact: LOW、impactDescription: minimizes effect re-runs、tags: rerender, useEffect, dependencies, optimization它归属于Re-render Optimizationrerender- 前缀分类该分类整体影响级别为 MEDIUM目标是减少不必要重渲染以降低浪费的计算并提升 UI 响应性见 _sections.md 第 5 节。在聚合文档 AGENTS.md 中该规则对应5.7 Narrow Effect Dependencies小节内容与本规则文件完全一致可作为快速检索入口。二、核心规则用原始类型依赖替代对象依赖规则的核心理念一句话即可概括依赖数组中尽量指定原始类型值而不是对象/数组/函数等引用类型值从而把 effect 的重跑范围收窄到真正变化的字段。错误写法任何 user 字段变化都会重跑useEffect(() { console.log(user.id); }, [user]);这里依赖的是整个user对象。只要user被重新赋值例如修改了user.name、user.email等任意字段后产生新对象引用React 就会判定依赖变化并重新执行 effect——尽管 effect 内部只读取了user.id。正确写法仅在 id 变化时重跑useEffect(() { console.log(user.id); }, [user.id]);把依赖收窄到原始类型user.id字符串/数字等原始值后effect 只会在user.id真正变化的那一次重跑。原理依赖比较基于引用Object.is从 React 的调度机制看useEffect的依赖数组在每次渲染后通过类似Object.is的算法逐个比较新旧依赖值原始类型string、number、boolean、null、undefined按值比较值不变即为未变化对象、数组、函数按引用比较只要每次渲染创建了新的对象字面量/数组/内联函数即使内容完全相同也会被判为已变化从而触发 effect 重跑。因此把依赖从[user]收窄为[user.id]的本质是把引用级敏感的比较降级为字段级敏感的比较这正是impactDescription: minimizes effect re-runs的含义。这一规则也呼应了同类规则 rerender-split-combined-hooks.md拆分依赖相互独立的 hooks的思路依赖越粗重跑面越大。三、派生状态在 effect 外计算而不是在 effect 内判断当 effect 依赖的其实是某个派生值时规则进一步要求把派生计算放到 effect 之外渲染期间让依赖数组挂载到派生后的结果上。错误写法宽度每变化 1px 都重跑// Incorrect: runs on width767, 766, 765... useEffect(() { if (width 768) { enableMobileMode(); } }, [width]);如果width来自窗口 resize 等连续更新的事件源那么拖拽窗口时width会依次经过 768、767、766、765……上述 effect 会在每一个中间值上都执行一次if判断并触发enableMobileMode()——即使width 768这个布尔结果在 767→766 之间根本没有变化。正确写法只在布尔翻转时重跑// Correct: runs only on boolean transition const isMobile width 768; useEffect(() { if (isMobile) { enableMobileMode(); } }, [isMobile]);把派生计算width 768提升到 effect 之外的渲染期效果如下isMobile是布尔原始值只有false → true或true → false时才变化窗口从 768px 拖到 767px布尔翻转一次effect 恰好执行一次继续拖到 766、765px布尔值仍为true依赖未变effect 不再重跑。这一步同时应用了两条原则窄化依赖挂载派生结果渲染期计算派生值不把派生逻辑塞进 effect。与配套规则的联动该写法与同分类下的两条规则互为补充组合使用效果最佳rerender-derived-state.md订阅派生布尔状态而非连续原始值。例如用useMediaQuery((max-width: 767px))替代直接订阅useWindowWidth()的连续值re-render 频率从每个像素变化降为每次布尔翻转rerender-derived-state-no-effect.md如果某个值能直接从当前 props/state 计算出来就不要把它存进 state 再通过 effect 同步——在渲染期直接计算即可避免多余渲染与状态漂移rerender-move-effect-to-event.md如果副作用由特定用户动作点击、提交、拖拽触发应直接写在事件处理器里而不是建模成state effect否则 effect 会在无关变化时重跑甚至重复执行动作。换句话说一条完整的判断链是能放渲染期计算的放渲染期能放事件处理器的放事件处理器必须留在 effect 的把依赖窄化到最小原始值集合。四、在 ZCode 代码库中的实践印证从 ZCode 仓库源码结构看这类布尔派生值 窄依赖的模式在真实 UI 代码中被广泛采用可作为审查时的对照样本WorkspaceSidebarItem.tsx、TaskListItem.tsx 等组件中均存在媒体查询相关 hookuseMediaQuery/matchMedia的使用将窗口宽度映射为布尔值后再驱动渲染分支——这与规则中isMobile派生布尔值的思路一致ToolCallBlocks、app-shell 等目录下的大量 React 组件是执行本规则审查的直接对象。需要说明的是规则文件中的示例属于框架层面的通用模式具体是否采用取决于目标应用的框架与运行环境这一点在技能的 README.md 中有明确说明。在 ZCode 中应用时应以仓库实际组件代码为准逐条核对 effect 的依赖数组是否为原始类型、派生值是否已移出 effect。五、审查与重构清单把本规则落地为可执行的检查步骤扫描对象依赖useEffect、useMemo、useCallback的依赖数组中是否出现整个对象/数组/函数如[user]、[config]、[options]若是改为读取字段后的原始值[user.id]剥离派生值effect 内部是否有if (width 768)、if (list.length 0)这类基于连续值的判断若是将const isMobile width 768提到 effect 外依赖挂载[isMobile]判别来源副作用是否由明确用户动作触发若是参考 rerender-move-effect-to-event.md 移到事件处理器派生值是否可从 props/state 直接算出若是参考 rerender-derived-state-no-effect.md 在渲染期计算验证重跑次数重构前后可在 effect 内加日志观察连续状态更新如窗口 resize、表单输入下 effect 的执行次数是否由每次变化收敛为仅相关值变化。六、总结Narrow Effect Dependencies是 Re-render Optimization 分类中影响级别为 LOW、但收益非常直接的规则它不改变任何功能逻辑仅通过把useEffect的依赖数组从对象收窄到原始类型、把派生布尔值从 effect 内提升到渲染期就能系统性减少 effect 的无谓重跑从而降低enableMobileMode()这类副作用函数的调用频率也减少不必要的渲染工作。配合rerender-derived-state、rerender-derived-state-no-effect、rerender-move-effect-to-event等规则使用可以形成一套完整的最小副作用触发面优化方案直接用于 ZCode 桌面端与 Web 端 React 组件的性能审查与自动化重构。赞分享人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载相关推荐ZCode React 最佳实践Narrow Effect Dependencies收窄 Effect 依赖完全指南ZCode React 最佳实践Narrow Effect Dependencies收窄 Effect 依赖完全指南 ZCode 的前端构建于 ReactReact Effect 依赖收窄Narrow Effect Dependencies在 OpenMetadata 中最小化 useEffect 重跑的性能优化指南React Effect 依赖收窄Narrow Effect Dependencies在 OpenMetadata 中最小化 useEffect 重跑的性数据目录数据血缘数据治理后端MCP 服务黑果配置快速指南OpCore Simplify 如何自动生成 OpenCore EFI 并装好 macOS黑果配置快速指南OpCore Simplify 如何自动生成 OpenCore EFI 并装好 macOS 如果你正在为黑苹果配置头疼——OpenCore E开发工具CLI上一篇vue-grid-layout 官方示例全解析基本布局、事件监听、多网格与拖动权限控制实战指南下一篇Ant Design 常用布局中后台页面的导航布局规范与实现详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考