一、问题本质（先说清楚）

多个组件在同一页面，各自请求同一个接口，会造成：

• ❌ 重复网络请求
• ❌ 重复数据解析
• ❌ 多次触发渲染
• ❌ 状态不一致风险

本质是：数据源分散 + 请求不可控

二、核心优化思想（一句话）

请求只发一次，数据集中管理，组件只负责“消费数据”。

三、最核心的 5 种优化方案（重点 ⭐⭐⭐）

✅ 方案一：请求上移（最重要，90% 场景适用）

思路

• 接口请求放在父组件
• 子组件通过 props 接收

React 示例

function Page() {  const [data, setData] = useState(null);  useEffect(() => {    fetchApi().then(setData);  }, []);  return (    <>      <CompA data={data} />      <CompB data={data} />    </>  );}

Vue 示例

<script setup>const data = ref(null);onMounted(async () => {  data.value = await fetchApi();});</script><CompA :data="data" /><CompB :data="data" />

✅ 最简单、最推荐

✅ 方案二：全局状态管理（中大型项目）

适合

• 页面复杂
• 多层组件共享
• 多页面复用

技术选型

• React：Redux / Zustand / Jotai
• Vue：Pinia / Vuex

优点

• 自动去重
• 数据统一
• 可缓存

✅ 方案三：请求缓存（非常重要 ⭐）

核心思想

同一个接口 + 参数 → 只请求一次

React 推荐：React Query / SWR

useQuery(['userInfo'], fetchApi);

特性：

• 自动缓存
• 请求去重
• 失效更新
• 并发合并

Vue 推荐：Vue Query / SWR

useQuery(['data'], fetchApi);

✅ 方案四：接口聚合（后端配合，性能最佳）

思路

• 后端返回“页面所需完整数据”
• 前端不拆接口

{  "header": {},  "list": [],  "chart": {}}

优点：

• 网络请求最少
• 首屏最快

✅ 方案五：请求锁 / Promise 复用（高级）

场景

• 不能改结构
• 多组件同时触发

实现思路

let cachePromise = null;function fetchOnce() {  if (!cachePromise) {    cachePromise = fetchApi();  }  return cachePromise;}

多个组件共享同一个 Promise

四、性能提升点总结（你可以直接说）

五、React / Vue 额外性能细节（加分）

React

• 使用 React.memo
• useMemo 派生数据
• 避免 props 引用变化

Vue

• computed 缓存
• v-memo（Vue 3.3+）
• 合理拆分 reactive

六、真实项目中的标准优化流程（面试非常加分）

发现重复请求 → 抽离请求到父组件 / store → 加缓存层（React Query / Pinia） → 子组件只消费数据

七、30 秒面试标准回答（直接背）

多组件请求同一接口时，我会将请求上移到父组件或全局状态中统一管理；
同时引入请求缓存机制，确保相同参数只发一次请求；
组件只负责展示数据，从而减少重复请求、避免多余渲染并提升整体性能。

八、一句话终极总结

不要让组件“自己拿数据”，而要让数据“主动供给组件”。