你在 React 里具体做过哪些性能优化？

一、先给面试官一个总览（很重要）

在 React 项目中，我主要从 渲染控制、计算缓存、数据层、组件拆分 四个方面做过性能优化，针对的都是列表、表格和图表等高频性能瓶颈场景。

---

二、具体做过哪些优化（重点部分）

---

1️⃣ 列表 / 表格：虚拟列表（最硬核）

在性能查询和问题列表页面，数据量可能上千条，如果直接渲染会导致首屏和滚动卡顿。

做法：

• 使用虚拟列表（如 react-window / AntD 虚拟表格）

• 只渲染可视区域的 DOM

  <FixedSizeList
  height={500}
  itemCount={list.length}
  itemSize={48}

  {Row}

效果：

• DOM 数量从几千降到几十

• 滚动明显流畅

👉 这是面试官最认可的一点

---

2️⃣ useMemo：缓存计算结果（你前面问过）

一些表头配置、筛选后的数据、图表数据处理计算量比较大，如果每次渲染都重新计算，会有性能浪费。

const columns = useMemo(() => getColumns(config), [config]);
const filteredList = useMemo(() => filterData(list, params), [list, params]);

关键点：

• 只缓存 计算结果

• 依赖必须准确

---

3️⃣ useCallback：稳定函数引用，减少子组件重渲染

在表格和列表中，我们会把事件处理函数传给子组件，如果每次渲染函数都变化，会导致子组件不必要的更新。

const onRowClick = useCallback((row) => {
  setCurrent(row);
}, []);

配合：

export default React.memo(Row);

---

4️⃣ React.memo：避免不必要的组件更新

对于纯展示组件，比如表格行、图表容器，我们使用 React.memo 包裹，只有 props 变化才重新渲染。

const Row = React.memo(({ data }) => {
  return <div>{data.name}</div>;
});

---

5️⃣ 拆分组件，缩小更新范围（非常真实）

一开始筛选条件和列表在一个组件里，任何筛选变化都会导致整个页面重渲染，后来我们把筛选区、列表区、图表区拆成独立组件。

原则：

• 状态就近管理

• 减少顶层 state 数量

---

6️⃣ 图表性能优化（ECharts 场景）

图表数据量比较大，我们做了几件事：

• 图表组件懒加载

• 只有数据变化才重新 setOption

• 数据变化时用 useMemo 预处理

  const chartOption = useMemo(() => buildOption(data), [data]);

---

7️⃣ 接口 & 渲染配合优化（不是只会 React）

我们也配合后端做了接口合并、分页和按需加载，避免一次性拉取大量数据。

---

三、你可以补一句"我怎么验证优化效果"（加分）

优化过程中我们会通过 Chrome Performance、React DevTools Profiler 观察组件渲染次数和耗时，确保优化是有效的。

---

四、总结一句话（收尾）

总体来说，我在 React 中主要通过 虚拟列表减少 DOM 数量，useMemo / useCallback 控制渲染，组件拆分缩小更新范围，再结合接口层面的优化，来保证在大数据量场景下页面依然流畅。

---

五、30 秒极速版（如果面试官催）

列表用虚拟列表，复杂计算用 useMemo，事件函数用 useCallback，配合 React.memo 减少无效渲染，再通过组件拆分和按需加载控制更新范围。

---