百度面试总结——React新特性&手撕闭包（这个基础！！！但蒙掉了）

原创于 2025-08-01 21:34:18 发布 · 400 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #面试 #react.js

Javascript 同时被 3 个专栏收录

291 篇文章

订阅专栏

前端基础

203 篇文章

订阅专栏

项目

163 篇文章

订阅专栏

React新特性,Fiber React 16的过时了?

下面是 React 各主要版本（React 17、React 18、React 19） 的迭代亮点，以及对未来 React 20 的展望：

🚀 React 17（2020 年 10 月 20 日发布）

无新开发者 API 特性，主要目标是为后续升级打基础(opcito.com)。
事件处理机制优化：事件委托从 document 移至应用根容器，兼容性更好。
移除事件池机制：事件对象不再复用，简化 e.persist() 使用。
JSX Transform 简化：无需显式导入 React 即可使用 JSX(opcito.com)。

✨ React 18（2022 年 3 月 29 日发布）

并发渲染（Concurrent Rendering） 进入稳定版本，为大规模应用提供更流畅的 UI 体验(opcito.com)。
自动批处理（Automatic Batching）：多状态更新自动合并，减少不必要渲染(simplilearn.com)。
新 Hooks：如 useTransition、useDeferredValue、useSyncExternalStore、useInsertionEffect 等，用于处理异步更新与状态同步(simplilearn.com)。
支持 Suspense 的流式 SSR：可使用 renderToPipeableStream 等 API 改善首屏加载体验(simplilearn.com)。

🚧 React 19（2024 年 12 月 5 日发布稳定版）

支持 async 函数 Actions，可以直接在 <form action> 中处理异步逻辑，更简洁地管理表单提交与状态处理(react.dev)。
新增 Hooks：useOptimistic、useActionState、useFormStatus，用于乐观更新、Actions 状态管理以及表单状态追踪(react.dev)。
React Compiler 引入：自动编译优化 JSX/组件，减少重复 memo 化（如 useMemo、useCallback）的需要，提升构建与渲染效率(freecodecamp.org, geeksforgeeks.org)。
React Server Components（RSC）增强：支持更强的服务端渲染与流式调用，减少客户端负担(DEV Community)。
Suspense、错误边界与 DevTools 改进：深度优化并发模式下的错误处理及开发体验(DEV Community)。
TypeScript 类型支持加强：新 Hooks 与 API 拥有更精准的类型推断支持(geeksforgeeks.org)。

红极一时的 Reddit 社区表示：“React 19 安全可用，兼容性非常好”“几乎没有 breaking changes”(reddit.com)。

🔮 React 20（尚未正式发布，但社区预测与初期信息）

Server Components 更进一步完善：包括组件缓存、精细数据获取控制以及减少客户端 JavaScript 负载(techmade.medium.com)。
并发渲染 API 改进：更灵活地管理渲染优先级、Suspense 和复杂状态并更新机制(emirbalic.com, reddit.com)。
新的性能调优 Hooks：社区预测将加入更多控制并发和推迟更新的 Hook，提升大规模应用体验(emirbalic.com)。
规范版本更新策略：官方表示如果没有破坏性改动，通常不会推出大版本更新，可能更多以小版本形式推新功能(reddit.com)。

📊 比较一览表

版本	发布时间	主要特点
React 17	2020‑10‑20	无新功能，专注兼容性、事件机制调整、JSX Transform
React 18	2022‑03‑29	并发渲染、自动批处理、多种新 Hook、SSR 流式渲染支持
React 19	2024‑12‑05	Actions 支持 async、React Compiler 自动优化、RSC 强化、新 Hook 系统
React 20	未来版本（预测）	Server Actions & Cache 控制、并发渲染进阶、性能优化 Hook、新 API

🧩 升级建议

若您还停留在 React 17，可优先升级至 React 18，以拿到并发机制与新的 Hooks；
如果项目对性能、表单管理或 SSR 有更高需求，React 19 是目前最值得尝试的版本；
对于 React 20，目前仍在开发预测阶段，可关注社区动态，在非生产环境中逐步尝试新功能。

如果你需要示例代码、升级迁移指南、与 React Router / Next.js 等框架集成策略，欢迎告诉我，我可以提供定制化帮助。

React 17、18 和 19 各版本带来了不同程度的更新，以下是它们的新特性详解：

React 17：为未来奠基的“无特性”版本

React 17 于 2020 年发布，被称为“无特性更新”，主要目标是为未来的 React 版本升级打下基础。(yisu.com)

核心改进：

事件委托机制调整：事件绑定从 document 移至 React 应用的根 DOM 容器，减少与其他库（如 jQuery）共存时的冲突。 (CSDN博客)
移除事件池机制：事件对象不再复用，开发者无需手动调用 e.persist()，代码更简洁安全。 (CSDN博客)
新的 JSX 转换：使用 JSX 时不再需要显式引入 React。 (CSDN博客)

React 18：引入并发渲染，提升性能和用户体验

React 18 于 2022 年发布，带来了多项新特性，显著提升了性能和用户体验。(zh-hans.react.dev)

主要特性：

并发渲染（Concurrent Rendering）：引入可中断的渲染机制，使应用在处理复杂更新时更加流畅。 (zh-hans.legacy.reactjs.org)
自动批处理（Automatic Batching）：默认情况下，React 会将多个状态更新合并，减少渲染次数，提高性能。 (notes.fe-mm.com)
新 API：startTransition 和 useTransition：用于标记非紧急更新，优化用户交互体验。
支持 Suspense 的流式服务器端渲染（SSR）：提升服务器渲染性能，改善首屏加载速度。

React 19：增强表单处理和异步操作支持

React 19 于 2024 年底发布，重点增强了表单处理和异步操作的能力。(summer889.com)

关键更新：

Actions 支持：允许在 <form> 的 action 属性中直接传入异步函数，简化表单提交逻辑。 (summer889.com)
新 Hook：useOptimistic 和 useActionState：分别用于管理乐观更新和处理异步操作的状态。 (zh-hans.react.dev)
样式表优先级管理：引入内置样式表支持，简化样式的应用方式，并确保在不同场景中正确呈现。 (博客园)
原生支持 Document Metadata：增强对文档元数据的支持，提升 SEO 和社交媒体分享体验。

如果您需要更详细的示例代码或升级指南，请告知，我可以为您提供进一步的帮助。

以下是 React 17、18 和 19 的核心特性详解，结合官方更新文档和社区实践整理：

⚙️ 一、React 17：平稳过渡的桥梁

事件委托机制优化
- 事件监听从全局 document 改为应用根容器（如 root），避免多版本 React 共存时的冲突，提升隔离性。
- 示例：ReactDOM.render(<App />, document.getElementById('root')) 中的根节点成为事件委托目标。
渐进式升级支持
- 允许多个 React 版本在同一页面共存（如微前端架构），为大型项目逐步迁移提供可能。
JSX 转换优化
- 配合 Babel 新插件，无需显式导入 React 即可使用 JSX（编译时代码优化）。
生命周期方法调整
- 废弃 componentWillMount 等旧生命周期方法，改为 UNSAFE_ 前缀，推动开发者转向新 API（如 getDerivedStateFromProps）。

🚀 二、React 18：并发渲染革命

并发模式（Concurrent Rendering）
- 核心变革：渲染任务可中断/恢复，根据优先级调度（如用户交互 > 数据加载），避免界面卡顿。
- 启用方式：使用 createRoot 替代 ReactDOM.render，开启并发能力。
自动批处理（Automatic Batching）
- 所有场景（包括 setTimeout、Promise）的状态更新合并为单次渲染，减少重复渲染次数。
- 强制同步更新：flushSync 可绕过批处理（需谨慎使用）。
新 Suspense 特性
- 支持数据获取的异步等待，结合 fallback 展示加载状态，优化用户体验。
- 流式 SSR：renderToPipeableStream 实现边渲染边传输，加速首屏加载。
新 Hooks API
- useTransition：标记非紧急更新（如搜索筛选），避免阻塞交互。
- useDeferredValue：延迟更新非关键 UI（如大型列表），保持输入流畅。
- useId：生成跨平台唯一 ID，解决服务端/客户端渲染不一致问题。

🔮 三、React 19：异步操作与性能巅峰

Actions API

简化异步操作管理（如表单提交），自动处理 pending 状态、错误和乐观更新。

示例：

const [error, submitAction, isPending] = useActionState(async (formData) => {
  await updateData(formData); // 服务端操作
});

新 Hook：useOptimistic
- 实现乐观更新（如点赞按钮立即响应），后台同步服务端状态。
- 代码示例：
```
const [optimisticLikes, addOptimistic] = useOptimistic(likes, (cur, newLike) => cur + 1);
```
Server Components 成熟化
- 服务端组件（RSC）减少客户端 bundle 体积，支持数据库直连和 SEO 优化。
- 标记语法：'use server' 声明服务端函数，'use client' 标记客户端组件。
资源加载优化
- use Hook 直接消费 Promise 或上下文，简化异步数据读取：
```
const data = use(fetchDataPromise); // 替代 useEffect + 状态管理
```
元数据与样式优先级
- 组件内直接渲染 <title>、<meta>，自动提升到文档头部。
- 样式表优先级控制（precedence="high"），避免 CSS 冲突。

💎 四、版本演进对比总结

特性	React 17	React 18	React 19
核心目标	多版本共存与事件隔离	并发渲染与性能优化	异步操作简化与 RSC 成熟化
渲染模式	同步渲染	并发渲染（可中断）	并发渲染强化 + 流式优化
异步管理	手动处理	`useTransition`/`useDeferredValue`	`Actions`/`useOptimistic`
服务端能力	基础 SSR	Suspense SSR + 流式渲染	Server Components 正式支持
Hooks 新增	无	`useId`/`useTransition` 等	`use`/`useActionState`

💡 实践建议：

升级策略：
- React 17 → 18：需替换 ReactDOM.render 为 createRoot，测试并发兼容性。
- React 18 → 19：关注 Actions 和 RSC 的集成，逐步替换异步逻辑。
项目选型：
- 新项目直接采用 React 18/19 + Next.js（内置 RSC 支持）。
- 存量项目优先引入 useTransition 优化交互卡顿问题。

React 的演进始终围绕性能（并发渲染）、开发体验（Hooks/Actions）和 全栈能力（Server Components）展开。19 版本标志着 React 从“视图库”迈向“全栈框架”，未来可重点关注编译优化（如 React Forget）。

以下是 React 17、18 和 19 的核心特性详解，结合官方更新文档和社区实践整理：

⚙️ 一、React 17：平稳过渡的桥梁

事件委托机制优化
- 事件监听从全局 document 改为应用根容器（如 root），避免多版本 React 共存时的冲突，提升隔离性。
- 示例：ReactDOM.render(<App />, document.getElementById('root')) 中的根节点成为事件委托目标。
渐进式升级支持
- 允许多个 React 版本在同一页面共存（如微前端架构），为大型项目逐步迁移提供可能。
JSX 转换优化
- 配合 Babel 新插件，无需显式导入 React 即可使用 JSX（编译时代码优化）。
生命周期方法调整
- 废弃 componentWillMount 等旧生命周期方法，改为 UNSAFE_ 前缀，推动开发者转向新 API（如 getDerivedStateFromProps）。

🚀 二、React 18：并发渲染革命

并发模式（Concurrent Rendering）
- 核心变革：渲染任务可中断/恢复，根据优先级调度（如用户交互 > 数据加载），避免界面卡顿。
- 启用方式：使用 createRoot 替代 ReactDOM.render，开启并发能力。
自动批处理（Automatic Batching）
- 所有场景（包括 setTimeout、Promise）的状态更新合并为单次渲染，减少重复渲染次数。
- 强制同步更新：flushSync 可绕过批处理（需谨慎使用）。
新 Suspense 特性
- 支持数据获取的异步等待，结合 fallback 展示加载状态，优化用户体验。
- 流式 SSR：renderToPipeableStream 实现边渲染边传输，加速首屏加载。
新 Hooks API
- useTransition：标记非紧急更新（如搜索筛选），避免阻塞交互。
- useDeferredValue：延迟更新非关键 UI（如大型列表），保持输入流畅。
- useId：生成跨平台唯一 ID，解决服务端/客户端渲染不一致问题。

🔮 三、React 19：异步操作与性能巅峰

Actions API

简化异步操作管理（如表单提交），自动处理 pending 状态、错误和乐观更新。

示例：

const [error, submitAction, isPending] = useActionState(async (formData) => {
  await updateData(formData); // 服务端操作
});

新 Hook：useOptimistic
- 实现乐观更新（如点赞按钮立即响应），后台同步服务端状态。
- 代码示例：
```
const [optimisticLikes, addOptimistic] = useOptimistic(likes, (cur, newLike) => cur + 1);
```
Server Components 成熟化
- 服务端组件（RSC）减少客户端 bundle 体积，支持数据库直连和 SEO 优化。
- 标记语法：'use server' 声明服务端函数，'use client' 标记客户端组件。
资源加载优化
- use Hook 直接消费 Promise 或上下文，简化异步数据读取：
```
const data = use(fetchDataPromise); // 替代 useEffect + 状态管理
```
元数据与样式优先级
- 组件内直接渲染 <title>、<meta>，自动提升到文档头部。
- 样式表优先级控制（precedence="high"），避免 CSS 冲突。

💎 四、版本演进对比总结

特性	React 17	React 18	React 19
核心目标	多版本共存与事件隔离	并发渲染与性能优化	异步操作简化与 RSC 成熟化
渲染模式	同步渲染	并发渲染（可中断）	并发渲染强化 + 流式优化
异步管理	手动处理	`useTransition`/`useDeferredValue`	`Actions`/`useOptimistic`
服务端能力	基础 SSR	Suspense SSR + 流式渲染	Server Components 正式支持
Hooks 新增	无	`useId`/`useTransition` 等	`use`/`useActionState`

💡 实践建议：

升级策略：
- React 17 → 18：需替换 ReactDOM.render 为 createRoot，测试并发兼容性。
- React 18 → 19：关注 Actions 和 RSC 的集成，逐步替换异步逻辑。
项目选型：
- 新项目直接采用 React 18/19 + Next.js（内置 RSC 支持）。
- 存量项目优先引入 useTransition 优化交互卡顿问题。

React 的演进始终围绕性能（并发渲染）、开发体验（Hooks/Actions）和 全栈能力（Server Components）展开。19 版本标志着 React 从“视图库”迈向“全栈框架”，未来可重点关注编译优化（如 React Forget）。

在面试中介绍 React 的新特性时，建议结合最新版本（如 React 19）的核心更新，突出其对开发体验和性能优化的提升。以下是一些关键点，供您参考：

React 19 的主要新特性

1. 服务器组件（Server Components）

React 19 引入了服务器组件（Server Components），允许部分组件在服务器端渲染，减轻客户端负担，提高性能。(博客园)

减少客户端 JavaScript 体积，提升加载速度。
增强与服务器端数据的整合，改善 SEO。
通过 'use client' 和 'use server' 指令明确组件的运行环境。(博客园, 博客园)

2. Actions API 与表单处理优化

Actions API 简化了表单提交和状态管理流程：(博客园)

通过将函数直接传递给 <form> 的 action 属性，实现更简洁的事件处理。
支持在客户端组件中调用服务器端异步函数，便于处理数据库操作等任务。(zh-hans.react.dev, 博客园)

3. 新的钩子函数：`useActionState` 和 `useOptimistic`

React 19 引入了新的钩子函数，提升状态管理的灵活性：(博客园)

useActionState：管理操作的待处理状态和结果，简化状态更新逻辑。
useOptimistic：支持乐观 UI 更新，在请求完成前提供即时反馈。(博客园, zh-hans.react.dev)

面试中的表达建议

在面试中，您可以这样介绍 React 的新特性：

“在 React 19 中，服务器组件的引入使得部分组件可以在服务器端渲染，减少了客户端的负担，提高了性能。此外，Actions API 简化了表单处理流程，新的钩子函数如 useActionState 和 useOptimistic 提升了状态管理的灵活性。这些特性共同提升了开发效率和用户体验。”(博客园)

如果您需要进一步了解 React 的新特性或准备面试相关的问题，欢迎继续提问。

在面试中介绍 React 的新特性时，建议结合最新版本（如 React 19）的核心更新，突出其对开发体验和性能优化的提升。以下是一些关键点，供您参考：

React 19 的主要新特性

1. 服务器组件（Server Components）

React 19 引入了服务器组件（Server Components），允许部分组件在服务器端渲染，减轻客户端负担，提高性能。(博客园)

减少客户端 JavaScript 体积，提升加载速度。
增强与服务器端数据的整合，改善 SEO。
通过 'use client' 和 'use server' 指令明确组件的运行环境。(博客园, 博客园)

2. Actions API 与表单处理优化

Actions API 简化了表单提交和状态管理流程：(博客园)

通过将函数直接传递给 <form> 的 action 属性，实现更简洁的事件处理。
支持在客户端组件中调用服务器端异步函数，便于处理数据库操作等任务。(zh-hans.react.dev, 博客园)

3. 新的钩子函数：`useActionState` 和 `useOptimistic`

React 19 引入了新的钩子函数，提升状态管理的灵活性：(博客园)

useActionState：管理操作的待处理状态和结果，简化状态更新逻辑。
useOptimistic：支持乐观 UI 更新，在请求完成前提供即时反馈。(博客园, zh-hans.react.dev)

面试中的表达建议

在面试中，您可以这样介绍 React 的新特性：

“在 React 19 中，服务器组件的引入使得部分组件可以在服务器端渲染，减少了客户端的负担，提高了性能。此外，Actions API 简化了表单处理流程，新的钩子函数如 useActionState 和 useOptimistic 提升了状态管理的灵活性。这些特性共同提升了开发效率和用户体验。”(博客园)

如果您需要进一步了解 React 的新特性或准备面试相关的问题，欢迎继续提问。

在面试中介绍React新特性时，需兼顾技术深度与表达逻辑，以下是结构化表达框架和关键点，结合React 16+到19的核心特性设计：

⚙️ 一、版本演进与技术脉络

React 16：架构革新基石
- Fiber架构：重构协调算法，支持任务中断/恢复，为并发模式奠基（解决同步渲染阻塞UI问题）
- 错误边界（Error Boundaries）：通过 componentDidCatch 隔离组件错误，提升应用健壮性
- Portal与Fragment：突破DOM层级限制（如模态框）、支持多节点返回
React 18：并发革命
- 并发渲染（Concurrent Rendering）：
  - 核心：任务优先级调度（如用户输入 > 数据加载），通过 startTransition 标记非紧急更新，避免界面卡顿
  - 启用方式：createRoot 替代 ReactDOM.render
- 自动批处理（Automatic Batching）：合并异步/同步的多次 setState 为单次渲染，显著减少重渲染次数
- Suspense增强：
  - 支持数据获取的异步等待，结合 fallback 展示加载状态
  - 流式SSR（renderToPipeableStream）：边传输边渲染，加速首屏加载
- 新Hooks：
  - useId：解决SSR/CSR ID不一致问题
  - useTransition：管理低优先级更新（如搜索筛选）
React 19：异步操作与全栈深化
- Actions API：
  - 统一管理异步操作状态（pending/错误/乐观更新），替代手动 useState 逻辑
  - 示例：const [error, submitAction] = useActionState(async (formData) => { ... })
- Server Components稳定化：
  - 服务端直接生成组件，减少客户端bundle体积，支持数据库直连（'use server' 声明）
- 资源优化：
  - use Hook：直接消费Promise（const data = use(fetchPromise)），简化异步数据读取
  - 元数据原生支持：组件内直接声明 <title>，自动提升至 <head>

💡 二、面试表达技巧

结构化表达（STAR法则）
- 情境（Situation）：
  
  “在重构电商搜索页时，旧版React 17下频繁用户输入导致页面卡顿（FPS ≤ 30）…”
- 行动（Action）：
  
  “升级React 18后，用 useTransition 区分输入框更新（高优先级）和搜索结果渲染（低优先级）…”
- 结果（Result）：
  
  “交互流畅性提升，FPS稳定在60，首屏加载速度优化40%”
原理级洞察
- 并发渲染本质：
  
  “Fiber节点构成链表结构，配合调度器（Scheduler）实现可中断更新，类似浏览器的requestIdleCallback”
- 自动批处理实现：
  
  “React 18 将更新队列统一处理，而React 17仅在事件回调内批处理”
对比框架设计（加分项）
- React vs Vue：
  
  “React Fiber解决渲染阻塞需主动调度，而Vue的响应式+模板编译天然更细粒度更新，故无需类似架构”

📊 三、特性对比表（面试收尾总结）

特性	React 18	React 19
核心目标	并发渲染与调度优化	异步操作简化 + 全栈能力深化
关键API	`startTransition`/`useDeferredValue`	`useActionState`/`useOptimistic`
渲染模式	可中断并发渲染	流式SSR + 渐进式Hydration
性能优化	自动批处理减少渲染次数	服务端组件减少bundle体积

⚠️ 四、避坑指南

避免术语堆砌：先说明“解决什么问题”，再讲“如何实现”。

❌ 错误：“React 19有Server Components”
✅ 正确：“React 19的Server Components将数据请求移至服务端，首屏加载速度提升30%”
区分使用场景：
- useTransition：优化交互响应（如输入时延迟渲染列表）
- useDeferredValue：优化非关键UI（如大列表过滤）
强调演进逻辑：

“从React 16的Fiber铺垫→18的并发实现→19的Actions统一异步模型，React始终围绕性能、开发体验、全栈能力 迭代”

进阶建议：

若被问“React 19为何取消 useTransition？”需知：Actions API 整合了其功能
手写简易 useActionState 实现（见代码示例）可显著提升技术可信度

// 简易useActionState实现（面试手写参考）
function useActionState(action) {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState(null);
  const run = async (data) => {
    setIsPending(true);
    try {
      await action(data);
      setError(null);
    } catch (e) {
      setError(e.message);
    } finally {
      setIsPending(false);
    }
  };
  return [error, run, isPending];
}

通过以上结构化表达，既能展现技术深度，又能体现对React设计哲学的思考，助你在面试中脱颖而出。

在JavaScript中，通过闭包实现缓存（Memoization）是一种优化重复计算的高效方案。其核心是利用闭包保留缓存对象的特性，避免相同输入的重复计算。以下是不同场景下的实现代码及详细解析：

⚙️ 一、基础实现：对象存储缓存

通过闭包保存缓存对象，以参数序列化为键存储结果：

function memoize(func) {
    const cache = {};  // 闭包保存的缓存对象
    return function(...args) {
        const key = JSON.stringify(args);  // 参数序列化为唯一键
        if (cache[key]) {
            console.log("从缓存获取");
            return cache[key];  // 命中缓存
        }
        const result = func(...args);  // 未命中则计算
        cache[key] = result;  // 存储结果
        return result;
    };
}

// 示例：计算阶乘
const factorial = memoize(n => 
    n === 0 ? 1 : n * factorial(n - 1)
);
console.log(factorial(5)); // 计算并缓存
console.log(factorial(5)); // 从缓存获取（输出相同结果）

关键点：

适用场景：纯函数（相同输入必得相同输出）。
优势：减少重复计算，如递归阶乘、斐波那契数列等。

⚡ 二、进阶优化：缓存控制与性能提升

1. 限制缓存大小（使用`Map`）

避免内存无限增长，自动淘汰最早缓存：

function memoize(func, limit = 10) {
    const cache = new Map();  // Map保留插入顺序
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            return cache.get(key);  // 命中缓存
        }
        const result = func(...args);
        cache.set(key, result);
        // 超出限制时删除最早缓存
        if (cache.size > limit) {
            const firstKey = cache.keys().next().value;
            cache.delete(firstKey);
        }
        return result;
    };
}

适用场景：高频调用但输入范围有限的函数（如枚举值查询）。

2. 支持异步函数缓存

处理Promise类型的异步操作（如API请求）：

function memoizeAsync(func) {
    const cache = {};
    return async function(...args) {
        const key = JSON.stringify(args);
        if (cache[key]) {
            return cache[key];  // 直接返回缓存的Promise
        }
        const resultPromise = func(...args);
        cache[key] = resultPromise;
        return resultPromise;
    };
}

// 示例：缓存API请求
const fetchData = memoizeAsync(url => 
    fetch(url).then(res => res.json())
);
fetchData("https://api.example.com/data");  // 首次请求
fetchData("https://api.example.com/data");  // 返回缓存的Promise

🧩 三、应用场景示例

1. 递归优化（斐波那契数列）

避免重复计算子问题，性能提升显著：

const fibonacci = memoize(n => 
    n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2)
);
console.log(fibonacci(40));  // 无缓存时极慢，缓存后快速输出

2. 数据查询缓存

缓存数据库或API响应，减少网络请求：

const getUserInfo = memoize(userId => {
    console.log("Fetching user data...");
    return { id: userId, name: `User${userId}` };
});
getUserInfo(1);  // 打印"Fetching user data..."
getUserInfo(1);  // 直接返回缓存，无打印

3. Vue/React中的计算属性缓存

Vue的computed或React的useMemo底层类似闭包缓存：

// Vue示例：缓存复杂计算
export default {
  data() { return { list: [/* 大量数据 */] }; },
  computed: {
    filteredList: memoize(function() {
      return this.list.filter(item => item.value > 10);
    })
  }
}

⚠️ 四、注意事项

内存泄漏
- 长期运行的缓存需设置大小限制（如limit参数）。
- 避免缓存非纯函数（如依赖外部状态）或易变数据。
缓存键的生成
- 复杂对象序列化可能性能较差（深拷贝大对象时需谨慎）。
- 可自定义序列化逻辑（如key = args.join("-")）。

缓存失效机制

时间过期：增加timestamp判断，定期清理。

手动清理：暴露clearCache方法：

function memoize(func) {
    const cache = {};
    function clear() { cache = {}; }
    const memoizedFunc = (...args) => { /*...*/ };
    memoizedFunc.clearCache = clear;  // 附加清理方法
    return memoizedFunc;
}
const cachedFn = memoize(fn);
cachedFn.clearCache();  // 手动清空

💎 五、完整代码模板

function memoize(func, options = {}) {
    const { limit = Infinity, expire = 0 } = options;
    const cache = new Map();
    return function(...args) {
        const key = JSON.stringify(args);
        // 检查缓存是否存在且未过期
        if (cache.has(key)) {
            const [result, timestamp] = cache.get(key);
            if (!expire || Date.now() - timestamp < expire) {
                return result;
            }
            cache.delete(key);  // 过期则删除
        }
        // 计算并存储新结果
        const result = func(...args);
        cache.set(key, [result, Date.now()]);
        // 清理最早缓存
        if (cache.size > limit) {
            cache.delete(cache.keys().next().value);
        }
        return result;
    };
}