Polar 前端性能优化用模块级 Map 缓存重复函数调用React/Next.js 记忆化实战【免费下载链接】polarPolar — A billing platform for the intelligence era项目地址: https://gitcode.com/GitHub_Trending/po/polar本指南以 Polar 仓库内置的 Vercel React 最佳实践规则集.agents/skills/vercel-react-best-practices/SKILL.md中的js-cache-function-results规则为核心系统讲解如何在 React/Next.js 渲染期间使用模块级 Map 缓存函数计算结果消除同一输入下的冗余计算。读完你将掌握两种可落地的记忆化模式多值 Map 缓存与单值哨兵缓存、缓存失效的正确姿势以及它们在 Polar 前端源码如 useLocalStorage.ts中的真实工程化应用。规则定位JavaScript 性能类中等影响项在 Vercel 整理的 40 条 React/Next.js 性能规则中本规则位于「JavaScript Performance」类别优先级别为LOW-MEDIUM影响描述为avoid redundant computation避免冗余计算属于渲染期的高频纯函数优化。规则元数据如下字段值规则标题Cache Repeated Function CallsimpactMEDIUM影响描述avoid redundant computation标签javascript, cache, memoization, performance它属于执行期runtime优化与js-cache-property-access循环内缓存属性访问、js-cache-storage缓存 localStorage 读取同属一类适合在消除了瀑布流请求、优化完包体之后进一步压榨渲染路径上的计算开销。问题场景渲染循环中的重复计算React 组件每次渲染都会重新执行函数体。当你在map()循环里直接调用纯函数如字符串转 slug、格式化、哈希计算时同一输入会被反复计算。规则给出如下反例function ProjectList({ projects }: { projects: Project[] }) { return ( div {projects.map(project { // slugify() called 100 times for same project names const slug slugify(project.name) return ProjectCard key{project.id} slug{slug} / })} /div ) }如果列表包含重复的project.nameslugify()会对相同字符串执行成百上千次完全相同的计算。这类问题的本质是纯函数对相同输入产生相同输出但每次渲染都重复执行没有利用先前的结果。在 Polar 这类以表格、列表、指标卡片为主的计费管理前端中类似的重复计算会随列表长度与渲染频率线性放大。核心模式一模块级 Map 缓存规则给出的正解是在模块顶层声明一个Map用函数参数作为键、计算结果作为值形成「计算一次、命中即取」的记忆化包装器// Module-level cache const slugifyCache new Mapstring, string() function cachedSlugify(text: string): string { if (slugifyCache.has(text)) { return slugifyCache.get(text)! } const result slugify(text) slugifyCache.set(text, result) return result } function ProjectList({ projects }: { projects: Project[] }) { return ( div {projects.map(project { // Computed only once per unique project name const slug cachedSlugify(project.name) return ProjectCard key{project.id} slug{slug} / })} /div ) }要点拆解缓存生命周期与模块一致slugifyCache是模块级常量只在模块加载时创建一次跨组件实例、跨渲染共享查询用hasget先判断键是否存在命中则直接返回避免用undefined兜底掩盖真实值当函数可能返回undefined时get的返回值无法区分未缓存与缓存了 undefined键必须是稳定、可比较的Map的键按SameValueZero语义比较字符串、数字等原始值最安全对象作为键时引用相等需自行确保相同输入确实是同一引用适用范围纯函数无副作用、无依赖变化、输出仅由入参决定最适合此模式。核心模式二单值函数的哨兵缓存如果缓存目标只有一个当前值例如当前登录态不必使用Map用「模块级变量 null 哨兵」即可。规则给出示例let isLoggedInCache: boolean | null null function isLoggedIn(): boolean { if (isLoggedInCache ! null) { return isLoggedInCache } isLoggedInCache document.cookie.includes(auth) return isLoggedInCache } // Clear cache when auth changes function onAuthChange() { isLoggedInCache null }这里的null充当「尚未缓存」的哨兵值因为合法的布尔值只有true/false所以! null即可判定命中。关键配套是显式的失效钩子——当认证状态变化时onAuthChange必须将缓存重置为null否则后续调用会读到过期状态。这一「变更时失效」的思路与规则库中 js-cache-storage 对 cookie 缓存的建议完全一致。为什么用 Map 而不是 Hook规则末尾特别强调Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.这是该模式区别于useMemo的关键设计决策维度useMemoHook模块级 Map使用位置仅限 React 组件/自定义 Hook工具函数、事件处理器、普通模块均可缓存生命周期随组件挂载/卸载随模块生命周期跨实例共享失效时机依赖数组变化即重算需手动失效或依赖外部同步适用场景依赖组件 props/state 的派生值入参固定、结果与渲染上下文无关的纯计算模块级缓存不需要组件树上下文因此可被slugify、格式化函数、数据转换工具等非组件代码复用同时它天然在多个组件实例之间共享同一输入全应用只算一次。作为反面提醒如果计算依赖组件状态应回到useMemo模块级缓存只适合结果只与入参相关的纯函数。缓存失效保证正确性的关键记忆化最大的风险是缓存与真实数据脱节。Vercel 规则库在 js-cache-storage 中给出了外部变更时的失效模板——当存储可能在其它标签页被修改、或 cookie 由服务端设置时必须监听变化并清除缓存window.addEventListener(storage, (e) { if (e.key) storageCache.delete(e.key) }) document.addEventListener(visibilitychange, () { if (document.visibilityState visible) { storageCache.clear() } })结合本规则可以归纳出三条失效纪律写入路径同步失效任何通过应用代码修改数据源的地方都应顺手删除对应缓存键跨标签页失效利用storage事件它只在其它标签页触发可见性失效页面重新可见时清空缓存兜底处理切换标签期间的外部变更。仓库佐证Polar 前端的模块级缓存实现该规则并非纸上谈兵Polar 前端仓库中存在多处对应实践。1. localStorage 读取缓存最贴合本规则js-cache-storage 的案例clients/apps/web/src/hooks/useLocalStorage.ts 在模块顶层声明缓存 Map并以「原始字符串 解析值」为单元缓存保证同一原始值解析出的对象引用稳定/** * Module-level cache so the snapshot returned to React stays * Object.is-stable when the underlying raw string hasnt changed. * Without this, useSyncExternalStore would treat each JSON.parse result * (or any deserialised object) as a new value and infinite-loop. */ const cache new Mapstring, { raw: string | null; value: unknown }()读取时先比较raw字符串未变化则直接返回缓存的解析值readFromStorageconst cached cache.get(key) if (cached cached.raw raw) return cached.value as T // ... 解析后 cache.set(key, { raw, value }) return value写入时删除对应缓存键并广播事件setValuecache.delete(key) window.dispatchEvent(new Event(CHANGED_EVENT))而subscribe同时监听浏览器原生storage事件跨标签页与自定义CHANGED_EVENT同标签页多实例同步这正是上文写入路径失效 跨标签页失效两条纪律的完整工程化体现。2. 用 Map 做 O(1) 分组与查找clients/apps/web/src/components/Events/eventTableUtils.ts 的groupEventsByDay用Map按键分组事件has/get/set均为 O(1)const grouped new Mapstring, schemas[Event][]() events.forEach((event) { const eventDate startOfDay(new Date(event.timestamp)) const dateKey eventDate.toISOString().split(T)[0] if (!grouped.has(dateKey)) { grouped.set(dateKey, []) } grouped.get(dateKey)!.push(event) })这与规则库中 js-index-maps把多次.find()换成一次建 Map和 js-set-map-lookups数组转 Set 做 O(1) 成员判定是同一思想一次 O(n) 建索引换 N 次 O(1) 查找。3. 模块级 Map 管理副作用句柄clients/apps/web/src/components/Toast/use-toast.ts 用模块级 Map 记录 toast 的定时器句柄避免每次渲染重建const toastTimeouts new Mapstring, ReturnTypetypeof setTimeout()由此可见模块级 Map 在 Polar 前端既用于结果缓存也用于句柄管理等跨渲染状态是前端性能与一致性基础设施的一部分。与其他缓存规则的配合边界同一技能库把缓存拆成了有明确适用边界的多条规则组合使用才能覆盖完整链路js-cache-function-results本文渲染期纯函数结果记忆化js-cache-storagelocalStorage/sessionStorage/document.cookie是同步且昂贵的 I/O应在内存缓存读结果server-cache-react服务端单请求内用React.cache()去重如认证、数据库查询server-cache-lru跨请求数据用 LRU 缓存避免无限增长client-swr-dedup客户端网络请求用 SWR 自动去重。模块级 Map 缓存取代不了上述任何一条它只解决计算的重复不解决I/O与网络请求的重复对可能无限增长的键空间还应参考 LRU 策略限制上限防止内存泄漏。适用前提与注意事项只缓存纯函数入参相同、输出恒定、无副作用依赖Date.now()、随机数、外部状态的计算不应缓存关注键空间键取值无界时如用户输入字符串长时间运行会累积内存需引入上限或失效策略失效优先于命中任何数据源可能被外部改写其它标签页、服务端、定时任务的场景必须先设计失效机制再谈缓存优先级认知该规则 impact 为 MEDIUM属渲染期增量优化应优先处理瀑布流、包体、服务端性能等 CRITICAL/HIGH 项再应用本模式。该实践的背景可追溯到 Vercel 工程团队公开发布的《How we made the Vercel Dashboard twice as fast》一文其中大量使用了类似的纯函数缓存与渲染去重手段。在 Polar 项目中遵循本规则即可在列表密集、指标卡片繁多的计费界面中显著减少冗余计算让渲染路径只做必要的工作。【免费下载链接】polarPolar — A billing platform for the intelligence era项目地址: https://gitcode.com/GitHub_Trending/po/polar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Polar 前端性能优化：用模块级 Map 缓存重复函数调用（React/Next.js 记忆化实战）
Polar 前端性能优化用模块级 Map 缓存重复函数调用React/Next.js 记忆化实战【免费下载链接】polarPolar — A billing platform for the intelligence era项目地址: https://gitcode.com/GitHub_Trending/po/polar本指南以 Polar 仓库内置的 Vercel React 最佳实践规则集.agents/skills/vercel-react-best-practices/SKILL.md中的js-cache-function-results规则为核心系统讲解如何在 React/Next.js 渲染期间使用模块级 Map 缓存函数计算结果消除同一输入下的冗余计算。读完你将掌握两种可落地的记忆化模式多值 Map 缓存与单值哨兵缓存、缓存失效的正确姿势以及它们在 Polar 前端源码如 useLocalStorage.ts中的真实工程化应用。规则定位JavaScript 性能类中等影响项在 Vercel 整理的 40 条 React/Next.js 性能规则中本规则位于「JavaScript Performance」类别优先级别为LOW-MEDIUM影响描述为avoid redundant computation避免冗余计算属于渲染期的高频纯函数优化。规则元数据如下字段值规则标题Cache Repeated Function CallsimpactMEDIUM影响描述avoid redundant computation标签javascript, cache, memoization, performance它属于执行期runtime优化与js-cache-property-access循环内缓存属性访问、js-cache-storage缓存 localStorage 读取同属一类适合在消除了瀑布流请求、优化完包体之后进一步压榨渲染路径上的计算开销。问题场景渲染循环中的重复计算React 组件每次渲染都会重新执行函数体。当你在map()循环里直接调用纯函数如字符串转 slug、格式化、哈希计算时同一输入会被反复计算。规则给出如下反例function ProjectList({ projects }: { projects: Project[] }) { return ( div {projects.map(project { // slugify() called 100 times for same project names const slug slugify(project.name) return ProjectCard key{project.id} slug{slug} / })} /div ) }如果列表包含重复的project.nameslugify()会对相同字符串执行成百上千次完全相同的计算。这类问题的本质是纯函数对相同输入产生相同输出但每次渲染都重复执行没有利用先前的结果。在 Polar 这类以表格、列表、指标卡片为主的计费管理前端中类似的重复计算会随列表长度与渲染频率线性放大。核心模式一模块级 Map 缓存规则给出的正解是在模块顶层声明一个Map用函数参数作为键、计算结果作为值形成「计算一次、命中即取」的记忆化包装器// Module-level cache const slugifyCache new Mapstring, string() function cachedSlugify(text: string): string { if (slugifyCache.has(text)) { return slugifyCache.get(text)! } const result slugify(text) slugifyCache.set(text, result) return result } function ProjectList({ projects }: { projects: Project[] }) { return ( div {projects.map(project { // Computed only once per unique project name const slug cachedSlugify(project.name) return ProjectCard key{project.id} slug{slug} / })} /div ) }要点拆解缓存生命周期与模块一致slugifyCache是模块级常量只在模块加载时创建一次跨组件实例、跨渲染共享查询用hasget先判断键是否存在命中则直接返回避免用undefined兜底掩盖真实值当函数可能返回undefined时get的返回值无法区分未缓存与缓存了 undefined键必须是稳定、可比较的Map的键按SameValueZero语义比较字符串、数字等原始值最安全对象作为键时引用相等需自行确保相同输入确实是同一引用适用范围纯函数无副作用、无依赖变化、输出仅由入参决定最适合此模式。核心模式二单值函数的哨兵缓存如果缓存目标只有一个当前值例如当前登录态不必使用Map用「模块级变量 null 哨兵」即可。规则给出示例let isLoggedInCache: boolean | null null function isLoggedIn(): boolean { if (isLoggedInCache ! null) { return isLoggedInCache } isLoggedInCache document.cookie.includes(auth) return isLoggedInCache } // Clear cache when auth changes function onAuthChange() { isLoggedInCache null }这里的null充当「尚未缓存」的哨兵值因为合法的布尔值只有true/false所以! null即可判定命中。关键配套是显式的失效钩子——当认证状态变化时onAuthChange必须将缓存重置为null否则后续调用会读到过期状态。这一「变更时失效」的思路与规则库中 js-cache-storage 对 cookie 缓存的建议完全一致。为什么用 Map 而不是 Hook规则末尾特别强调Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.这是该模式区别于useMemo的关键设计决策维度useMemoHook模块级 Map使用位置仅限 React 组件/自定义 Hook工具函数、事件处理器、普通模块均可缓存生命周期随组件挂载/卸载随模块生命周期跨实例共享失效时机依赖数组变化即重算需手动失效或依赖外部同步适用场景依赖组件 props/state 的派生值入参固定、结果与渲染上下文无关的纯计算模块级缓存不需要组件树上下文因此可被slugify、格式化函数、数据转换工具等非组件代码复用同时它天然在多个组件实例之间共享同一输入全应用只算一次。作为反面提醒如果计算依赖组件状态应回到useMemo模块级缓存只适合结果只与入参相关的纯函数。缓存失效保证正确性的关键记忆化最大的风险是缓存与真实数据脱节。Vercel 规则库在 js-cache-storage 中给出了外部变更时的失效模板——当存储可能在其它标签页被修改、或 cookie 由服务端设置时必须监听变化并清除缓存window.addEventListener(storage, (e) { if (e.key) storageCache.delete(e.key) }) document.addEventListener(visibilitychange, () { if (document.visibilityState visible) { storageCache.clear() } })结合本规则可以归纳出三条失效纪律写入路径同步失效任何通过应用代码修改数据源的地方都应顺手删除对应缓存键跨标签页失效利用storage事件它只在其它标签页触发可见性失效页面重新可见时清空缓存兜底处理切换标签期间的外部变更。仓库佐证Polar 前端的模块级缓存实现该规则并非纸上谈兵Polar 前端仓库中存在多处对应实践。1. localStorage 读取缓存最贴合本规则js-cache-storage 的案例clients/apps/web/src/hooks/useLocalStorage.ts 在模块顶层声明缓存 Map并以「原始字符串 解析值」为单元缓存保证同一原始值解析出的对象引用稳定/** * Module-level cache so the snapshot returned to React stays * Object.is-stable when the underlying raw string hasnt changed. * Without this, useSyncExternalStore would treat each JSON.parse result * (or any deserialised object) as a new value and infinite-loop. */ const cache new Mapstring, { raw: string | null; value: unknown }()读取时先比较raw字符串未变化则直接返回缓存的解析值readFromStorageconst cached cache.get(key) if (cached cached.raw raw) return cached.value as T // ... 解析后 cache.set(key, { raw, value }) return value写入时删除对应缓存键并广播事件setValuecache.delete(key) window.dispatchEvent(new Event(CHANGED_EVENT))而subscribe同时监听浏览器原生storage事件跨标签页与自定义CHANGED_EVENT同标签页多实例同步这正是上文写入路径失效 跨标签页失效两条纪律的完整工程化体现。2. 用 Map 做 O(1) 分组与查找clients/apps/web/src/components/Events/eventTableUtils.ts 的groupEventsByDay用Map按键分组事件has/get/set均为 O(1)const grouped new Mapstring, schemas[Event][]() events.forEach((event) { const eventDate startOfDay(new Date(event.timestamp)) const dateKey eventDate.toISOString().split(T)[0] if (!grouped.has(dateKey)) { grouped.set(dateKey, []) } grouped.get(dateKey)!.push(event) })这与规则库中 js-index-maps把多次.find()换成一次建 Map和 js-set-map-lookups数组转 Set 做 O(1) 成员判定是同一思想一次 O(n) 建索引换 N 次 O(1) 查找。3. 模块级 Map 管理副作用句柄clients/apps/web/src/components/Toast/use-toast.ts 用模块级 Map 记录 toast 的定时器句柄避免每次渲染重建const toastTimeouts new Mapstring, ReturnTypetypeof setTimeout()由此可见模块级 Map 在 Polar 前端既用于结果缓存也用于句柄管理等跨渲染状态是前端性能与一致性基础设施的一部分。与其他缓存规则的配合边界同一技能库把缓存拆成了有明确适用边界的多条规则组合使用才能覆盖完整链路js-cache-function-results本文渲染期纯函数结果记忆化js-cache-storagelocalStorage/sessionStorage/document.cookie是同步且昂贵的 I/O应在内存缓存读结果server-cache-react服务端单请求内用React.cache()去重如认证、数据库查询server-cache-lru跨请求数据用 LRU 缓存避免无限增长client-swr-dedup客户端网络请求用 SWR 自动去重。模块级 Map 缓存取代不了上述任何一条它只解决计算的重复不解决I/O与网络请求的重复对可能无限增长的键空间还应参考 LRU 策略限制上限防止内存泄漏。适用前提与注意事项只缓存纯函数入参相同、输出恒定、无副作用依赖Date.now()、随机数、外部状态的计算不应缓存关注键空间键取值无界时如用户输入字符串长时间运行会累积内存需引入上限或失效策略失效优先于命中任何数据源可能被外部改写其它标签页、服务端、定时任务的场景必须先设计失效机制再谈缓存优先级认知该规则 impact 为 MEDIUM属渲染期增量优化应优先处理瀑布流、包体、服务端性能等 CRITICAL/HIGH 项再应用本模式。该实践的背景可追溯到 Vercel 工程团队公开发布的《How we made the Vercel Dashboard twice as fast》一文其中大量使用了类似的纯函数缓存与渲染去重手段。在 Polar 项目中遵循本规则即可在列表密集、指标卡片繁多的计费界面中显著减少冗余计算让渲染路径只做必要的工作。【免费下载链接】polarPolar — A billing platform for the intelligence era项目地址: https://gitcode.com/GitHub_Trending/po/polar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
