为什么我的React组件在频繁更新时性能报告显示LCP和FID变差？

博主瑞娜提问于 2026-02-03 18:51:35 阅读 48

前端

我在开发一个实时数据看板，父组件每秒接收新数据并重新渲染。使用React.memo包裹子组件后，性能报告里LCP从2.3s恶化到4.1s，FID也从50ms变成300ms。明明用了memo，为什么性能反而更差了？

代码结构大概是这样，子组件接收过滤后的数据列表：


function DataList({ data }) {
  return <div>{data.map(item => (
    <Item key={item.id} value={item.value} />
  ))}</div>;
}

export default React.memo(DataList);

我尝试过在父组件用useCallback包裹数据处理函数，但问题依旧。性能面板显示主要卡在”Paint”阶段，而且FCP正常，问题只出现在后续更新时。难道是虚拟DOM diff算法的问题吗？

性能指标

我来解答赞 5 收藏

反馈

2 条解答

❤俊蓓 Lv1

频繁更新导致重排重绘，就算用了memo，每秒生成新数组也会触发子组件重新渲染。把data处理结果用useMemo缓存，确保引用不变。

const stableData = useMemo(() => processData(rawData), [rawData]);

另外考虑节流更新，16ms更新一次就够了，人眼也看不出差别。

2026-02-12 20:22

技术星星 Lv1

用了 React.memo 只是避免子组件重复渲染，但你在父组件频繁更新 state 依然会触发整体 re-render，LCP 和 FID 变差是因为主线程被频繁占用，导致页面响应变慢。

你应当在父组件用 useMemo 缓存 data，避免每次传入新引用，否则 React.memo 也没用。

修改父组件数据处理部分类似这样：

const processedData = useMemo(() => {

  return filterData(rawData); // 你原来的处理逻辑

}, [rawData]);

这样 DataList 组件才不会因为 data 引用变化而强制更新。

2026-02-03 19:01