React应用比Vanilla JS慢的原因及优化方案咨询

问题背景 #

我做了两个示例：一个基于React，一个基于原生JS。React版本运行极慢，不仅状态变更延迟，连类切换操作都卡顿；原生JS版本哪怕处理10000个元素都几乎瞬间响应（尽管它存在直接修改对象的问题）。

我想解决两个问题：

• 如何让React达到原生JS的运行速度？
• 如果无法实现，至少如何快速切换颜色以掩盖状态变更的延迟？

另外，我已知元素ID与其在数组中的索引匹配，希望修改状态更新函数，避免遍历整个数组、复制所有内容仅为修改单个元素。为什么不能像原生JS版本那样直接修改状态？

原状态更新函数 #

const updateData = id => {
  setData(prevState => {
    return prevState.map(el => {
      return el.id === id ? { ...el, active: !el.active } : el;
    });
  });
};

尝试优化后仍卡顿的函数 #

const updateData = id => {
  setData(prevState => {
    const item = prevState[id];
    const newState = [...prevState];
    newState[id] = {...item, active: !item.active}
    return newState;
  })
}

解决方案 #

核心瓶颈分析 #

你优化后的状态更新逻辑已经没问题了（避免了遍历，只复制数组并修改单个元素），卡顿的根本原因是每次状态更新时，React会重新渲染所有10000个子组件，而原生JS是直接操作单个DOM元素的类名，没有批量重渲染的开销。

1. 实现原生级速度的关键：减少不必要重渲染 #

用React.memo包装子组件

子组件是纯组件（props不变则无需重渲染），用React.memo包裹后，只有当自身props变化时才会重新渲染：

import React, { memo } from 'react';

const Box = memo(({ id, active, onClick }) => {
  return (
    <div 
      className={`box ${active ? 'active' : ''}`}
      onClick={() => onClick(id)}
    />
  );
});

用useCallback缓存事件函数

父组件的updateData如果每次渲染都重新创建，会导致子组件的onClick props变化，触发不必要的重渲染，用useCallback缓存：

import React, { useCallback } from 'react';

const updateData = useCallback((id) => {
  setData(prevState => {
    const newState = [...prevState];
    newState[id] = { ...newState[id], active: !newState[id].active };
    return newState;
  });
}, []);

做完这两步后，点击单个方块时只有该方块组件会重渲染，性能会和原生JS版本基本一致。

2. 临时应急：即时切换颜色掩盖延迟 #

如果暂时不想调整组件结构，可以先直接操作DOM给用户即时反馈，再异步更新状态：

const updateData = (id) => {
  // 先切换DOM类名，瞬间响应
  const boxEl = document.getElementById(`box-${id}`);
  boxEl.classList.toggle('active');
  
  // 异步更新状态，不阻塞UI
  setData(prevState => {
    const newState = [...prevState];
    newState[id] = { ...newState[id], active: !newState[id].active };
    return newState;
  });
};

// 给每个Box元素添加唯一ID
const Box = ({ id, active, onClick }) => {
  return (
    <div 
      id={`box-${id}`}
      className={`box ${active ? 'active' : ''}`}
      onClick={() => onClick(id)}
    />
  );
};

这种方法的缺点是状态和DOM可能短暂不一致，仅作为临时过渡方案。

3. 为什么不能直接修改React状态？ #

React依赖不可变数据模式触发重渲染：如果直接修改prevState（比如prevState[id].active = !prevState[id].active），状态对象的引用没有变化，React无法检测到状态更新，不会触发组件重渲染，导致UI和状态不一致。你优化后的写法是正确的不可变更新方式，问题不在状态更新逻辑本身。

内容的提问来源于stack exchange，提问作者Nikos