React中怎么不可变地删除JS数组元素

在 React 中删除数组状态（State）中的某个元素时，核心答案只有一条：绝对不要直接修改（Mutate）现有数组，而是利用纯函数生成一个排除了目标元素的新数组，并将其传入状态更新函数。最常见、最地道的写法是使用原生 Array.prototype.filter() 方法。本文将围绕 React 为什么要求不可变、三种不同场景下的不可变删除方案，以及常见反模式与深层嵌套处理展开详尽解析。

一、为什么必须“不可变”：React 状态渲染机制解析

许多初学 React 的开发者常写出 items.splice(index, 1); setItems(items); 这样的代码，结果发现页面上的列表毫无动静。这并非 JavaScript 出了问题，而是触碰了 React 的状态比对底线。

React 组件的重新渲染依赖于对 State 的浅比较检查（使用 Object.is()）。当调用 useState 提供的更新函数时，React 会比对传入的值与当前状态的内存地址（引用）：

• 原地修改（如 splice、push、pop）：数组内部的内容确实少了，但数组在内存堆中的地址（引用指针）完全没有发生改变。React 进行浅比较时判定 Object.is(oldState, newState) === true，认为数据没有变化，从而直接跳过重新渲染（Bailout）。
• 不可变修改（如 filter、toSpliced、slice 展开）：操作会开辟一块新的内存空间并返回全新的数组引用。React 检测到引用地址变更（Object.is() === false），随之触发 Virtual DOM 的 Diff 算法并更新真实 DOM。

二、场景一：按唯一标识（ID）删除 —— 推荐方案 filter()

在绝大多数 React 列表场景中，数组元素都是带有唯一标识符（如 id、uuid 或 key）的对象。此时，Array.prototype.filter() 是最为稳妥、语义最清晰的选择。

1. 核心语法与函数式更新

如果状态更新依赖于前一次的状态，推荐使用 setState 的函数式更新写法（Updater Function），以确保在异步或批量更新中拿到最新快照：

// 基础语法
setItems(prevItems => prevItems.filter(item => item.id !== targetId));

2. 完整 React 组件实战

下面是一个标准的 TodoList 删除示例。每个待办事项拥有唯一的 id，点击删除按钮触发不可变过滤：

import React, { useState } from 'react';

// 初始数据
const initialTodos = [
  { id: 101, text: '学习 React 不可变原则' },
  { id: 102, text: '整理周报文档' },
  { id: 103, text: '提交 Pull Request' }
];

export default function TodoApp() {
  const [todos, setTodos] = useState(initialTodos);

  // 删除特定 ID 的待办项
  const handleDelete = (idToDelete) => {
    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== idToDelete));
  };

  return (
    <div style={{ padding: 20 }}>
      <h3>待办事项列表 ({todos.length})</h3>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} style={{ marginBottom: 8 }}>
            <span>{todo.text}</span>
            <button 
              onClick={() => handleDelete(todo.id)} 
              style={{ marginLeft: 12, color: '#DC2626' }}
            >
              删除
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

为什么优先按 ID 删除？在列表渲染中，如果用户删除了中间的某个项目，后续项目的下标（Index）全部会发生前移。如果依赖 Index 删除，在并发更新或异步事件中极易引发数据漂移与误删；而唯一的业务 ID 始终固定，任何时候执行 filter(item => item.id !== id) 都能准确命中。

三、场景二：按索引（Index）删除 —— slice 与 toSpliced

当数组存储的是基本数据类型（如数字、字符串标签），或者某些场景下只获取到了待删除项的下标位置时，我们需要基于索引进行不可变删除。常见的合规做法有两种：

1. 方式 A：展开运算符结合 Array.prototype.slice()

slice() 会返回选定范围的新数组片段，原数组不发生变动。通过将目标索引左侧与右侧的切片展开并重新组合，即可拼出删后新数组：

const removeByIndex = (targetIndex) => {
  setList(prevList => [
    ...prevList.slice(0, targetIndex),
    ...prevList.slice(targetIndex + 1)
  ]);
};

执行原理：如果原数组为 ['apple', 'banana', 'orange']，要删除下标为 1 的 'banana'：

• prevList.slice(0, 1) 提取 ['apple']；
• prevList.slice(2) 提取 ['orange']；
• 通过 [...] 展开合并，生成全新数组 ['apple', 'orange']。该方法兼容所有现代与历史浏览器版本。

2. 方式 B：现代标准 Array.prototype.toSpliced() (ES2023)

以往 splice() 会修改原数组，而 ECMAScript 2023 引入了对应的非破坏性版本 toSpliced()。它接受与 splice() 相同的参数，但不改变原数组，直接返回一个浅拷贝的新数组：

const removeByIndexModern = (targetIndex) => {
  setList(prevList => prevList.toSpliced(targetIndex, 1));
};

这是语法最为简洁的现代写法。但在旧版浏览器（如 Chrome < 110、Safari < 16、Node.js < 20）中使用时，需要确认项目中配置了 core-js polyfill。

四、常见反模式与排查警示

在日常代码审查中，以下三类关于数组删除的写法属于典型反模式，必须坚决规避：

反模式 1：在回调内部调用 splice 并返回原数组

// ❌ 严重错误！
setItems(prevItems => {
  prevItems.splice(targetIndex, 1); // 破坏了原数组
  return prevItems;                 // 返回的仍是同一个引用！
});

危害：不仅组件不会触发重新渲染，而且直接篡改了上一轮渲染周期的 State 镜像。如果后续触发其他状态更新，可能导致界面显示与内部数据不同步的隐蔽 Bug。

反模式 2：使用 delete 操作符

// ❌ 严重错误！
const nextItems = [...items];
delete nextItems[targetIndex]; // 产生稀疏数组（Sparse Array）
setItems(nextItems);

危害：JavaScript 中的 delete array[index] 不会改变数组长度，也不会让后续元素向前移动，而是在该下标处留下一个 empty（访问为 undefined）的空洞。渲染时极易引发 TypeError: Cannot read properties of undefined。

反模式 3：使用不可靠的 index 作为组件的 key

如果在 map 循环中使用了 key={index}，删除某个元素后，React 在对比虚拟 DOM 时会发现虽然数组长度减 1，但剩余元素的 key 仍然是 0, 1, 2...，这会导致包含本地临时状态（如 input 输入框内容、展开折叠状态）的子组件出现状态错位。

五、复杂场景：深层嵌套对象中的数组删除

若待删除数组位于复杂的深层嵌套对象中，使用原生展开运算符会让代码层层解构，冗长且极易写错：

// 原生多层解构展开（容易漏写浅拷贝层级）
setUserProfile(prev => ({
  ...prev,
  settings: {
    ...prev.settings,
    tags: prev.settings.tags.filter(tag => tag !== 'archived')
  }
}));

对于多层嵌套状态，推荐使用官方文档推荐的 Immer（或 use-immer 钩子）。Immer 会通过 Proxy 机制生成一个临时的 draft（草稿），允许开发者使用常规的可变语法，其底层会自动转换成深层不可变更新：

import { useImmer } from 'use-immer';

export default function Profile() {
  const [profile, updateProfile] = useImmer({
    user: { id: 1, name: 'Alice' },
    settings: {
      tags: ['react', 'frontend', 'archived']
    }
  });

  const removeTag = (tagToRemove) => {
    updateProfile(draft => {
      // 在 draft 内部可以直接使用 splice 或 filter
      const index = draft.settings.tags.indexOf(tagToRemove);
      if (index !== -1) {
        draft.settings.tags.splice(index, 1); // 安全：Immer 底层会完成不可变冻结
      }
    });
  };

  return (/* JSX 渲染 */);
}

六、方案选型与总结决策