一、先给面试官一个总览（很重要）
在 React 项目中，我主要从 渲染控制、计算缓存、数据层、组件拆分 四个方面做过性能优化，针对的都是列表、表格和图表等高频性能瓶颈场景。
二、具体做过哪些优化（重点部分）
1️⃣ 列表 / 表格：虚拟列表（最硬核）
在性能查询和问题列表页面，数据量可能上千条，如果直接渲染会导致首屏和滚动卡顿。
做法：
- 使用虚拟列表（如
react-window/ AntD 虚拟表格） - 只渲染可视区域的 DOM
<FixedSizeList
height={500}
itemCount={list.length}
itemSize={48}
>
{Row}
</FixedSizeList>
效果：
- 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 减少无效渲染，再通过组件拆分和按需加载控制更新范围。
