React组件状态删除元素的常规高效方法及业界惯例是什么？

我完全懂你这种觉得用_.cloneDeep处理状态不可变性有点繁琐的感受——其实React社区里有更简洁高效的方式来处理这类数组更新，不用深拷贝整个状态对象。下面就聊聊业界常用的几种方法：

1. 利用原生数组方法+函数式setState（最常用） #

对于删除数组元素的场景，filter方法简直是量身定做的，它本身就会返回一个全新的数组，完全符合不可变性要求。而且我们不需要克隆整个state，只需要更新pages这一部分就行：

deletePage = (id) => {
  ajax(`/content/${id}/delete`, 'delete')
    .then(({ data }) => {
      if (data.status === 'ok') {
        // 使用函数式setState，基于最新的prevState更新
        this.setState(prevState => ({
          pages: prevState.pages.filter(page => page.id !== id)
        }));
      }
    });
}

这里要注意用setState的函数式形式（接收prevState作为参数），因为setState是异步的，这样能确保我们基于最新的状态值进行修改，避免异步操作导致的状态不一致问题。这种方式只生成了新的pages数组，没有碰state里的其他属性，性能和代码简洁性都比深拷贝整个state好太多。

2. 复杂嵌套状态用Immer简化 #

如果你的状态结构比较复杂（比如pages里还有嵌套对象，或者state有多层嵌套），手动写不可变更新的代码会很麻烦，这时候可以用Immer库——它能让你像“直接修改”状态一样写代码，背后会自动帮你生成不可变的新状态。

先安装Immer：

npm install immer

然后修改你的代码：

import produce from 'immer';

deletePage = (id) => {
  ajax(`/content/${id}/delete`, 'delete')
    .then(({ data }) => {
      if (data.status === 'ok') {
        this.setState(produce(prevState => {
          // 直接修改草稿状态，Immer会处理不可变性
          prevState.pages = prevState.pages.filter(page => page.id !== id);
        }));
      }
    });
}

Immer在处理复杂状态更新时优势特别明显，能大幅减少冗余的拷贝代码，同时保证状态的不可变性，现在已经是React社区里很流行的工具了。

业界惯例总结 #

• 对于简单的数组/对象更新，优先用原生数组方法（filter、map、concat）或者扩展运算符（...）来生成新的状态片段，避免深拷贝整个state——深拷贝不仅性能开销大，而且完全没必要，我们只需要更新变化的部分。
• 复杂嵌套状态首选Immer，简化不可变更新逻辑。
• 异步操作后更新状态时，一定要用setState的函数式形式，确保基于最新状态修改。

对比你之前用_.cloneDeep的方式，其实是过度拷贝了——你只需要更新pages数组，克隆整个state是额外的性能消耗，而且代码也更啰嗦。上面的方法才是React社区处理这类场景的常规操作哦。

内容的提问来源于stack exchange，提问作者i.brod