一、问题本质（先说清楚）
多个组件在同一页面，各自请求同一个接口，会造成：
❌ 重复网络请求
❌ 重复数据解析
❌ 多次触发渲染
❌ 状态不一致风险
👉本质是：数据源分散 + 请求不可控
二、核心优化思想（一句话）
请求只发一次，数据集中管理，组件只负责“消费数据”。
三、最核心的 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
四、性能提升点总结（你可以直接说）
| 优化点 | 效果 |
|---|---|
| 请求合并 | 减少网络开销 |
| 数据集中 | 避免重复计算 |
| 缓存 | 防止重复请求 |
| 减少渲染 | 提升 FPS |
| 状态统一 | 防 bug |
五、React / Vue 额外性能细节（加分）
React
使用
React.memouseMemo 派生数据
避免 props 引用变化
Vue
computed 缓存
v-memo（Vue 3.3+）
合理拆分 reactive
六、真实项目中的标准优化流程（面试非常加分）
发现重复请求 → 抽离请求到父组件 / store → 加缓存层（React Query / Pinia） → 子组件只消费数据七、30 秒面试标准回答（直接背）
多组件请求同一接口时，我会将请求上移到父组件或全局状态中统一管理；
同时引入请求缓存机制，确保相同参数只发一次请求；
组件只负责展示数据，从而减少重复请求、避免多余渲染并提升整体性能。
八、一句话终极总结
不要让组件“自己拿数据”，而要让数据“主动供给组件”。
