React类组件中回调内更新数组状态的最优方案探讨

首先纠正你给出的三种写法的问题：

1. 第一种写法的语法问题：箭头函数绑定this的写法错误（需用handleOnAddingItem = (processingItem) => { ... }），若processingItem是单个项而非数组，[...processingItem]会直接报错；如果是替换整个数组，写法逻辑本身符合不可变原则，但需要修正语法。
2. 第二种写法的严重错误：直接获取this.state.processingItems的引用并调用push，会直接修改原State数组，违反React的State不可变原则。React依赖State的引用变化检测更新，修改原数组后引用未变，可能导致组件不触发渲染，还会引发不可预测的状态问题，绝对不能使用。
3. 第三种写法的逻辑错误：setState({ ...processingItem })会把数组展开为以索引为键的对象（比如数组[a,b]会变成{0:a, 1:b}），完全破坏原State结构，无法正确更新processingItems数组。

最优实现方式 #

根据你的需求（回调传入数组/单个项，更新processingItems），分两种场景给出方案：

场景1：回调传入完整的新数组（替换原有State数组）

如果需要用传入的数组覆盖processingItems，要保证创建新的数组引用（避免外部修改影响State）：

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      processingItems: []
    };
  }

  handleOnAddingItem = (newProcessingItems) => {
    this.setState({
      // 浅拷贝传入的数组，保证State引用更新
      processingItems: [...newProcessingItems]
      // 若能确保传入的newProcessingItems是全新且不会被外部修改的数组，也可直接赋值：
      // processingItems: newProcessingItems
    });
  }

  // ...其他组件逻辑
}

场景2：回调传入单个要添加的项（往原有数组末尾加元素）

推荐使用函数式setState，因为更新依赖之前的State，函数式写法能确保拿到最新的State值（避免异步更新导致的状态不一致）：

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      processingItems: []
    };
  }

  handleOnAddingItem = (item) => {
    this.setState(prevState => ({
      // 基于旧数组创建新数组，添加新项，符合不可变原则
      processingItems: [...prevState.processingItems, item]
    }));
  }

  // ...其他组件逻辑
}

关于性能的说明 #

你看到的“扩展运算符并非理想方案，应使用push”是误区：

• 直接修改原State的push是错误的，会破坏State不可变性；
• 如果是先拷贝数组再push（比如const newItems = [...prevState.processingItems]; newItems.push(item);），和扩展运算符写法的性能几乎一致，都是创建浅拷贝数组，在绝大多数业务场景下（数组长度不超过万级）性能开销可以忽略；
• React的不可变更新是保证组件正确渲染的基础，比起微乎其微的性能差异，维持State的不可变性更重要。

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