✨ [Feature Request] 支持删除列表功能

[wangzifei240303-tech]

功能请求：删除列表

描述

希望 React 能够提供更便捷的方式来删除列表中的元素。

使用场景

在开发中经常需要从列表（数组）中删除某个元素，并触发组件重新渲染。希望有更简洁的 API 或内置支持来处理此类操作。

期望行为

• 提供一个简单易用的方式删除列表中的单个或多个元素
• 删除后自动触发组件更新

当前行为

目前需要手动使用 filter 或 splice 等方法处理，缺乏统一的抽象。

附加信息

• React 版本：最新版
• 环境：Web

[MorikawaSouma]

👋 感谢你的功能建议！关于列表删除操作，React目前已经提供了非常简洁的方式来处理：

推荐实现方式：

import { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: '学习React' },
    { id: 2, text: '开发项目' },
  ]);

  const deleteTodo = (id: number) => {
    // 使用filter创建新数组，自动触发重新渲染
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
          <button onClick={() => deleteTodo(todo.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
}

使用filter方法是React中删除列表元素的标准模式，它符合React的不可变数据原则，并且非常简洁。React团队倾向于保持核心API简洁，不引入额外的列表操作API，因为JavaScript本身已经提供了足够强大的数组处理方法（filter、map、reduce等）。

你可以将这个模式封装成自定义Hook来复用：

function useList<T>(initialList: T[]) {
  const [list, setList] = useState(initialList);
  
  const remove = (predicate: (item: T) => boolean) => {
    setList(list.filter(predicate));
  };
  
  const add = (item: T) => {
    setList([...list, item]);
  };
  
  return { list, remove, add, set: setList };
}

这样使用起来会更方便：

const { list: todos, remove } = useList([...]);
remove(todo => todo.id === id);