拓冰网站定制 
音视频桌面应用后端【免费下载链接】mediago跨平台视频提取工具支持流媒体下载、视频下载、m3u8 下载及 B站视频下载提供 Windows 和 Mac 桌面客户端。Cross-platform video extraction tool: Supports streaming download, video download, m3u8 download, and Bilibili video download, with desktop clients for Windows and Mac.项目地址https://gitcode.com/caorushizi/mediago点击查看免费下载当鼠标追踪、拖拽、计时器等高频更新的值每变动一次都触发一次 setState 时组件会进入无意义的重渲染循环。mediago 仓库内置的 React 最佳实践技能源自 Vercel 工程团队的 67 条性能规则中Use useRef for Transient Values 正是针对这一问题的 Re-render Optimization 类规则影响等级 MEDIUM标签rerender, useref, state, performance。本文完整解读该规则的判断标准与正反示例并结合 mediago 前端中侧边栏拖拽调整宽度的真实实现说明该规则在大型 React 应用中的落地方式。规则定位与核心思想这条规则在 Vercel 规则体系中位于第 5 类「Re-render Optimization」在编译后的完整文档 AGENTS.md 中编号为 5.15影响描述为avoids unnecessary re-renders on frequent updates避免频繁更新带来的不必要重渲染。它的核心判断标准是一句话当一个值变化频繁、且你并不希望每次更新都引发重渲染例如鼠标追踪器、间隔计时器、瞬态标志位时把它存进useRef而不是useState。组件 state 留给驱动 UI 的值ref 留给临时的、贴近 DOM 的值。原理层面React 的重渲染是由 state或 context变化驱动的调度过程触发的setState会向 React 提交一次更新进入重渲染队列而写入ref.current只是一次普通属性赋值完全不经过 React 的更新调度因此更新 ref 不会触发任何重渲染。这使 ref 成为「事件回调与 DOM 之间」的高速通道。判断一个值该不该放 ref可以按两个问题自检这个值变了需要 React 重新计算 JSX 吗需要 →useState不需要直接改 DOM 或留给下一个事件读 →useRef这个值的更新频率是否远超一帧是如mousemove/pointermove→ 优先考虑 ref 直接操作 DOM。反例每次 mousemove 都重渲染规则文档给出的反例是一个鼠标追踪点组件用useState存储横坐标function Tracker() { const [lastX, setLastX] useState(0); useEffect(() { const onMove (e: MouseEvent) setLastX(e.clientX); window.addEventListener(mousemove, onMove); return () window.removeEventListener(mousemove, onMove); }, []); return ( div style{{ position: fixed, top: 0, left: lastX, width: 8, height: 8, background: black, }} / ); }问题在于mousemove事件的触发频率由硬件采样决定常见为每秒几十至上百次高刷新率环境下更高每次移动都调用setLastX(e.clientX)。虽然 React 18 的自动批处理会把同一事件内的多次更新合并但跨越不同事件回调的每次 setState 仍各触发一次重渲染。对一个仅包含一个div的组件来说代价尚可接受若Tracker是一个大列表或表单的父组件每次鼠标移动都会导致整棵子树重新执行 render 函数性能损耗会迅速放大。正例ref 存值 直接写 DOM追踪零重渲染规则给出的正确写法有两个关键动作用useRef记录数值本身再用第二个 ref 拿到 DOM 节点、在事件回调里直接改样式function Tracker() { const lastXRef useRef(0); const dotRef useRefHTMLDivElement(null); useEffect(() { const onMove (e: MouseEvent) { lastXRef.current e.clientX; const node dotRef.current; if (node) { node.style.transform translateX(${e.clientX}px); } }; window.addEventListener(mousemove, onMove); return () window.removeEventListener(mousemove, onMove); }, []); return ( div ref{dotRef} style{{ position: fixed, top: 0, left: 0, width: 8, height: 8, background: black, transform: translateX(0px), }} / ); }这段代码有三个值得注意的工程细节数值与 DOM 操作解耦lastXRef.current e.clientX把最新值沉淀下来供后续逻辑读取node.style.transform则绕过 React 直接更新视图。两者都发生在事件回调中React 对此一无所知也就没有任何重渲染。优先用transform而非lefttransform是可由合成器compositor处理的属性不触发布局layout与绘制paint而修改left会强制回流。这是「高频更新贴近 DOM」时的配套习惯。初始值与 ref 初始值保持一致内联样式里写transform: translateX(0px)、ref 初始化为0避免挂载后首次渲染与 ref 状态脱节。若组件卸载后重新挂载ref 会从初始值开始视图初始值必须与它匹配。实战印证mediago 侧边栏拖拽调整的完整实现规则示例是一个最小可运行片段在 mediago 的 Web 前端apps/ui中侧边栏宽度拖拽是这条规则更复杂的真实落地。app-side-bar.tsx 中的AppSideBar组件实现了带吸附动画的侧边栏调整宽度其拖拽过程正是「高频 pointermove 不触发 React 重渲染」的教科书式写法。1. 用 ref 承载整个拖拽会话。组件顶部定义了一个SidebarResizeSession接口把一次拖拽中的所有易变数据都装进单一对象interface SidebarResizeSession { latestExpandedWidth: number; pendingWidth: number; pointerId: number; previousBodyCursor: string; previousBodyUserSelect: string; resizeAnimationFrame: number | null; snapAnimationTimer: ReturnTypetypeof setTimeout | null; startWidth: number; startX: number; }const resizeSessionRef useRefSidebarResizeSession | null(null);pointerdown时创建会话并写入resizeSessionRef.currentpointermove中直接读写这个 ref。整个拖拽过程中没有任何setState调用AppSideBar及其兄弟子树不会因为指针移动而重渲染一次。2. 用requestAnimationFrame合并同一帧内的多次写入。handleResizePointerMove中每次事件只更新session.pendingWidth并把真正写 CSS 变量的动作放进 rAF 回调且用resizeAnimationFrame字段做去重——同一帧内多次 pointermove 只写一次 DOMsession.pendingWidth result.width; if (session.resizeAnimationFrame null) { session.resizeAnimationFrame requestAnimationFrame(() { if (resizeSessionRef.current ! session) return; session.resizeAnimationFrame null; sidebarRef.current?.style.setProperty( --sidebar-width, ${session.pendingWidth}px, ); }); }这是规则中「ref 存值 直接操作 DOM」模式的上位形态ref 不仅避免了重渲染rAF 批处理还保证了 DOM 写入频率被钳制在显示器刷新率内。3. 状态最终一致性只在交互结束那一刻提交 state。拖拽期间视图宽度由 ref CSS 变量驱动只有当pointerup/lostpointercapture/pointercancel触发finishSidebarResize时才把最终宽度写回 Zustand storeresizeSessionRef.current null; const state useShellStore.getState(); if (!state.sidebarCollapsed) { state.setSidebarExpandedWidth(session.latestExpandedWidth); }注意这里通过useShellStore.getState()直读 store而不是通过 hook 订阅——这是 Zustand 推荐的「事件回调中读最新状态」写法避免了把sidebarWidth放进组件订阅范围。写回 store 后一次有意的重渲染同步了 JSX 中的--sidebar-width初始值与真实宽度完成 ref 通道到 state 通道的交接。宽度取值约束最小 180px、最大 360px、折叠阈值则由同目录的 sidebar-sizing.ts 中纯函数resolveSidebarResize/clampSidebarExpandedWidth统一处理并有 sidebar-sizing.test.ts 测试覆盖。4. 卸载兜底effect 清理函数负责善后。组件还有一个空依赖数组的useEffect其清理函数在组件卸载时取消未执行的 rAF、清掉吸附动画定时器、还原document.body的 cursor 与 userSelect——这正是正例中「事件监听 清理函数」结构的工程化延伸。从源码结构看这种「ref 承载高频会话数据、rAF 合并 DOM 写入、结束事件统一提交 state」的组合是判断「瞬态值 vs UI 状态」边界的一个完整范本collapsed折叠/展开是驱动 JSX 的状态放在 store 里pendingWidth指针瞬时位置是纯瞬态值永远不进入 React。边界与常见误用结合规则表述Keep component state for UI; use refs for temporary DOM-adjacent values与上述实现可以归纳几条实践边界ref 不能替代 state 驱动 UI。如果某个值最终要反映到 JSX 上就必须有 state或 store承接否则视图不会更新、时间旅行调试与快照测试也会失真。正确节奏是「高频阶段走 ref结算阶段写一次 state」。ref 的更新不保证顺序与可见性。React 不承诺 ref 写入的时序也不会在 ref 变化时通知任何组件跨组件共享高频值时应确保读方与写方属于同一交互会话如sidebarRef与resizeSessionRef都由同一组件持有。StrictMode 双调用场景下 ref 初始化要幂等。useRef(initialValue)的初始值只用于第一次创建但事件回调中的读写逻辑应保持「重入安全」mediago 侧边栏实现中每个回调先校验session.pointerId event.pointerId即是此类防御。与相邻规则的关系。这条规则与同类中的rerender-move-effect-to-event把交互逻辑放进事件处理器而非 effect、rerender-defer-reads不要订阅只在回调中用到的 state思想相通而若你确实需要让 UI 平滑地「落后」于高频输入Vercel 体系里还有rerender-use-deferred-valueuseDeferredValue作为「既要 state 又要降频」的补充手段——ref 方案彻底绕开渲染useDeferredValue方案则保留渲染但让低优先级更新可被中断。小结rerender-use-ref-transient-values给出的是一条清晰的取舍规则值的特征存放位置典型例子变化驱动 JSX 输出useState/ store侧边栏折叠态、展开后的最终宽度高频变化、只需直接作用于 DOM 或被下一个事件读取useRef指针坐标、rAF 句柄、定时器句柄、会话级临时数据mediago 仓库中该规则以两种形态存在一是 规则原文 及其在 AGENTS.md 中的编译产物5.15 节供 Agent 与开发者在编写、评审 React 代码时引用二是 app-side-bar.tsx 中把「ref 会话 rAF 合并 结束提交 state」落到实处的生产级实现。掌握这条规则后你可以对任何「鼠标/拖拽/计时器类高频值」做出正确决策让它留在 ref 里贴近 DOM把重渲染留给真正需要更新界面的那一刻。赞分享音视频桌面应用后端【免费下载链接】mediago跨平台视频提取工具支持流媒体下载、视频下载、m3u8 下载及 B站视频下载提供 Windows 和 Mac 桌面客户端。Cross-platform video extraction tool: Supports streaming download, video download, m3u8 download, and Bilibili video download, with desktop clients for Windows and Mac.项目地址https://gitcode.com/caorushizi/mediago点击查看免费下载相关推荐Cherry Studio 前端性能优化useRef 瞬态值为高频更新消除不必要的重渲染Cherry Studio 前端性能优化useRef 瞬态值为高频更新消除不必要的重渲染 本文是 Cherry Studio 渲染层Electron 人工智能大模型AI 应用交互助手本地部署OpenMontage 前端性能优化用 useRef 承载瞬态值杜绝高频重渲染OpenMontage 前端性能优化用 useRef 承载瞬态值杜绝高频重渲染 导读 本指南基于 OpenMontage 仓库内置的 Vercel Reac人工智能AI Agent音视频媒体生成工作流自动化SurfSense React 性能优化实战用 useRef 存储瞬态值让高频更新不再引发多余重渲染SurfSense React 性能优化实战用 useRef 存储瞬态值让高频更新不再引发多余重渲染 在 React 组件中状态 useState 与人工智能AI 应用后端AI Agent网页爬虫RAG深度研究MCP 服务前端上一篇开源项目安装与配置指南Crest Ocean Render下一篇HotScript 使用教程TypeScript 类型级别的函数式编程革命创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 高频更新的值别放进 State：mediago 中 useRef 瞬态值优化规则详解
音视频桌面应用后端【免费下载链接】mediago跨平台视频提取工具支持流媒体下载、视频下载、m3u8 下载及 B站视频下载提供 Windows 和 Mac 桌面客户端。Cross-platform video extraction tool: Supports streaming download, video download, m3u8 download, and Bilibili video download, with desktop clients for Windows and Mac.项目地址https://gitcode.com/caorushizi/mediago点击查看免费下载当鼠标追踪、拖拽、计时器等高频更新的值每变动一次都触发一次 setState 时组件会进入无意义的重渲染循环。mediago 仓库内置的 React 最佳实践技能源自 Vercel 工程团队的 67 条性能规则中Use useRef for Transient Values 正是针对这一问题的 Re-render Optimization 类规则影响等级 MEDIUM标签rerender, useref, state, performance。本文完整解读该规则的判断标准与正反示例并结合 mediago 前端中侧边栏拖拽调整宽度的真实实现说明该规则在大型 React 应用中的落地方式。规则定位与核心思想这条规则在 Vercel 规则体系中位于第 5 类「Re-render Optimization」在编译后的完整文档 AGENTS.md 中编号为 5.15影响描述为avoids unnecessary re-renders on frequent updates避免频繁更新带来的不必要重渲染。它的核心判断标准是一句话当一个值变化频繁、且你并不希望每次更新都引发重渲染例如鼠标追踪器、间隔计时器、瞬态标志位时把它存进useRef而不是useState。组件 state 留给驱动 UI 的值ref 留给临时的、贴近 DOM 的值。原理层面React 的重渲染是由 state或 context变化驱动的调度过程触发的setState会向 React 提交一次更新进入重渲染队列而写入ref.current只是一次普通属性赋值完全不经过 React 的更新调度因此更新 ref 不会触发任何重渲染。这使 ref 成为「事件回调与 DOM 之间」的高速通道。判断一个值该不该放 ref可以按两个问题自检这个值变了需要 React 重新计算 JSX 吗需要 →useState不需要直接改 DOM 或留给下一个事件读 →useRef这个值的更新频率是否远超一帧是如mousemove/pointermove→ 优先考虑 ref 直接操作 DOM。反例每次 mousemove 都重渲染规则文档给出的反例是一个鼠标追踪点组件用useState存储横坐标function Tracker() { const [lastX, setLastX] useState(0); useEffect(() { const onMove (e: MouseEvent) setLastX(e.clientX); window.addEventListener(mousemove, onMove); return () window.removeEventListener(mousemove, onMove); }, []); return ( div style{{ position: fixed, top: 0, left: lastX, width: 8, height: 8, background: black, }} / ); }问题在于mousemove事件的触发频率由硬件采样决定常见为每秒几十至上百次高刷新率环境下更高每次移动都调用setLastX(e.clientX)。虽然 React 18 的自动批处理会把同一事件内的多次更新合并但跨越不同事件回调的每次 setState 仍各触发一次重渲染。对一个仅包含一个div的组件来说代价尚可接受若Tracker是一个大列表或表单的父组件每次鼠标移动都会导致整棵子树重新执行 render 函数性能损耗会迅速放大。正例ref 存值 直接写 DOM追踪零重渲染规则给出的正确写法有两个关键动作用useRef记录数值本身再用第二个 ref 拿到 DOM 节点、在事件回调里直接改样式function Tracker() { const lastXRef useRef(0); const dotRef useRefHTMLDivElement(null); useEffect(() { const onMove (e: MouseEvent) { lastXRef.current e.clientX; const node dotRef.current; if (node) { node.style.transform translateX(${e.clientX}px); } }; window.addEventListener(mousemove, onMove); return () window.removeEventListener(mousemove, onMove); }, []); return ( div ref{dotRef} style{{ position: fixed, top: 0, left: 0, width: 8, height: 8, background: black, transform: translateX(0px), }} / ); }这段代码有三个值得注意的工程细节数值与 DOM 操作解耦lastXRef.current e.clientX把最新值沉淀下来供后续逻辑读取node.style.transform则绕过 React 直接更新视图。两者都发生在事件回调中React 对此一无所知也就没有任何重渲染。优先用transform而非lefttransform是可由合成器compositor处理的属性不触发布局layout与绘制paint而修改left会强制回流。这是「高频更新贴近 DOM」时的配套习惯。初始值与 ref 初始值保持一致内联样式里写transform: translateX(0px)、ref 初始化为0避免挂载后首次渲染与 ref 状态脱节。若组件卸载后重新挂载ref 会从初始值开始视图初始值必须与它匹配。实战印证mediago 侧边栏拖拽调整的完整实现规则示例是一个最小可运行片段在 mediago 的 Web 前端apps/ui中侧边栏宽度拖拽是这条规则更复杂的真实落地。app-side-bar.tsx 中的AppSideBar组件实现了带吸附动画的侧边栏调整宽度其拖拽过程正是「高频 pointermove 不触发 React 重渲染」的教科书式写法。1. 用 ref 承载整个拖拽会话。组件顶部定义了一个SidebarResizeSession接口把一次拖拽中的所有易变数据都装进单一对象interface SidebarResizeSession { latestExpandedWidth: number; pendingWidth: number; pointerId: number; previousBodyCursor: string; previousBodyUserSelect: string; resizeAnimationFrame: number | null; snapAnimationTimer: ReturnTypetypeof setTimeout | null; startWidth: number; startX: number; }const resizeSessionRef useRefSidebarResizeSession | null(null);pointerdown时创建会话并写入resizeSessionRef.currentpointermove中直接读写这个 ref。整个拖拽过程中没有任何setState调用AppSideBar及其兄弟子树不会因为指针移动而重渲染一次。2. 用requestAnimationFrame合并同一帧内的多次写入。handleResizePointerMove中每次事件只更新session.pendingWidth并把真正写 CSS 变量的动作放进 rAF 回调且用resizeAnimationFrame字段做去重——同一帧内多次 pointermove 只写一次 DOMsession.pendingWidth result.width; if (session.resizeAnimationFrame null) { session.resizeAnimationFrame requestAnimationFrame(() { if (resizeSessionRef.current ! session) return; session.resizeAnimationFrame null; sidebarRef.current?.style.setProperty( --sidebar-width, ${session.pendingWidth}px, ); }); }这是规则中「ref 存值 直接操作 DOM」模式的上位形态ref 不仅避免了重渲染rAF 批处理还保证了 DOM 写入频率被钳制在显示器刷新率内。3. 状态最终一致性只在交互结束那一刻提交 state。拖拽期间视图宽度由 ref CSS 变量驱动只有当pointerup/lostpointercapture/pointercancel触发finishSidebarResize时才把最终宽度写回 Zustand storeresizeSessionRef.current null; const state useShellStore.getState(); if (!state.sidebarCollapsed) { state.setSidebarExpandedWidth(session.latestExpandedWidth); }注意这里通过useShellStore.getState()直读 store而不是通过 hook 订阅——这是 Zustand 推荐的「事件回调中读最新状态」写法避免了把sidebarWidth放进组件订阅范围。写回 store 后一次有意的重渲染同步了 JSX 中的--sidebar-width初始值与真实宽度完成 ref 通道到 state 通道的交接。宽度取值约束最小 180px、最大 360px、折叠阈值则由同目录的 sidebar-sizing.ts 中纯函数resolveSidebarResize/clampSidebarExpandedWidth统一处理并有 sidebar-sizing.test.ts 测试覆盖。4. 卸载兜底effect 清理函数负责善后。组件还有一个空依赖数组的useEffect其清理函数在组件卸载时取消未执行的 rAF、清掉吸附动画定时器、还原document.body的 cursor 与 userSelect——这正是正例中「事件监听 清理函数」结构的工程化延伸。从源码结构看这种「ref 承载高频会话数据、rAF 合并 DOM 写入、结束事件统一提交 state」的组合是判断「瞬态值 vs UI 状态」边界的一个完整范本collapsed折叠/展开是驱动 JSX 的状态放在 store 里pendingWidth指针瞬时位置是纯瞬态值永远不进入 React。边界与常见误用结合规则表述Keep component state for UI; use refs for temporary DOM-adjacent values与上述实现可以归纳几条实践边界ref 不能替代 state 驱动 UI。如果某个值最终要反映到 JSX 上就必须有 state或 store承接否则视图不会更新、时间旅行调试与快照测试也会失真。正确节奏是「高频阶段走 ref结算阶段写一次 state」。ref 的更新不保证顺序与可见性。React 不承诺 ref 写入的时序也不会在 ref 变化时通知任何组件跨组件共享高频值时应确保读方与写方属于同一交互会话如sidebarRef与resizeSessionRef都由同一组件持有。StrictMode 双调用场景下 ref 初始化要幂等。useRef(initialValue)的初始值只用于第一次创建但事件回调中的读写逻辑应保持「重入安全」mediago 侧边栏实现中每个回调先校验session.pointerId event.pointerId即是此类防御。与相邻规则的关系。这条规则与同类中的rerender-move-effect-to-event把交互逻辑放进事件处理器而非 effect、rerender-defer-reads不要订阅只在回调中用到的 state思想相通而若你确实需要让 UI 平滑地「落后」于高频输入Vercel 体系里还有rerender-use-deferred-valueuseDeferredValue作为「既要 state 又要降频」的补充手段——ref 方案彻底绕开渲染useDeferredValue方案则保留渲染但让低优先级更新可被中断。小结rerender-use-ref-transient-values给出的是一条清晰的取舍规则值的特征存放位置典型例子变化驱动 JSX 输出useState/ store侧边栏折叠态、展开后的最终宽度高频变化、只需直接作用于 DOM 或被下一个事件读取useRef指针坐标、rAF 句柄、定时器句柄、会话级临时数据mediago 仓库中该规则以两种形态存在一是 规则原文 及其在 AGENTS.md 中的编译产物5.15 节供 Agent 与开发者在编写、评审 React 代码时引用二是 app-side-bar.tsx 中把「ref 会话 rAF 合并 结束提交 state」落到实处的生产级实现。掌握这条规则后你可以对任何「鼠标/拖拽/计时器类高频值」做出正确决策让它留在 ref 里贴近 DOM把重渲染留给真正需要更新界面的那一刻。赞分享音视频桌面应用后端【免费下载链接】mediago跨平台视频提取工具支持流媒体下载、视频下载、m3u8 下载及 B站视频下载提供 Windows 和 Mac 桌面客户端。Cross-platform video extraction tool: Supports streaming download, video download, m3u8 download, and Bilibili video download, with desktop clients for Windows and Mac.项目地址https://gitcode.com/caorushizi/mediago点击查看免费下载相关推荐Cherry Studio 前端性能优化useRef 瞬态值为高频更新消除不必要的重渲染Cherry Studio 前端性能优化useRef 瞬态值为高频更新消除不必要的重渲染 本文是 Cherry Studio 渲染层Electron 人工智能大模型AI 应用交互助手本地部署OpenMontage 前端性能优化用 useRef 承载瞬态值杜绝高频重渲染OpenMontage 前端性能优化用 useRef 承载瞬态值杜绝高频重渲染 导读 本指南基于 OpenMontage 仓库内置的 Vercel Reac人工智能AI Agent音视频媒体生成工作流自动化SurfSense React 性能优化实战用 useRef 存储瞬态值让高频更新不再引发多余重渲染SurfSense React 性能优化实战用 useRef 存储瞬态值让高频更新不再引发多余重渲染 在 React 组件中状态 useState 与人工智能AI 应用后端AI Agent网页爬虫RAG深度研究MCP 服务前端上一篇开源项目安装与配置指南Crest Ocean Render下一篇HotScript 使用教程TypeScript 类型级别的函数式编程革命创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考