React实现一周七日可点击删除列表，最优方案选类组件还是函数组件？

需求梳理 #

• 编写React组件，实现一周七天的列表渲染，支持点击任意条目对应的删除按钮删除该日期
• 确认该需求是否可以通过类组件实现，对比类组件与其他实现方式，给出React生态下的最优实现方案

实现方式可行性说明 #

该需求完全可以通过类组件实现，除了类组件外，React 16.8版本之后推出的函数组件+Hooks也可以实现该需求。
目前React官方优先推荐函数组件+Hooks的写法作为最优方案，相比类组件，该写法无需处理this指向绑定问题，代码更简洁，后续逻辑迭代和复用成本更低。仅当你需要维护低于16.8版本的老旧React项目时，才建议使用类组件实现。

类组件参考实现代码 #

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listItem: ["sun", "mon", "tue", "wed", "thur", "fri", "sat"]
    };
    this.deleteItem = this.deleteItem.bind(this);
  }

  deleteItem(number) {
    const newList = [...this.state.listItem];
    newList.splice(number, 1);
    this.setState({ listItem: newList });
  }

  render() {
    return (
      <div className='wrapper'>
        <ul>
          {this.state.listItem.map((day, i) => (
            <li key={day}>
              {day}
              <button id={day} onClick={() => this.deleteItem(i)}>
                删除
              </button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

函数组件优化实现（推荐） #

你提供的函数组件已经可以正常运行，可以做两处小优化提升代码质量：

1. 给列表渲染的li元素添加key属性，避免React渲染警告，这里直接用星期字符串作为key比下标更稳定
2. 删除逻辑可以用filter方法实现，写法更简洁，不需要手动浅复制数组再操作

优化后的代码如下：

import { useState } from 'react';

const App = () => {
  const [listItem, setListItem] = useState([
    "sun", "mon", "tue", "wed", "thur", "fri", "sat"
  ]);

  const deleteItem = (targetIndex) => {
    setListItem(prevList => prevList.filter((_, index) => index !== targetIndex));
  };

  return (
    <div className='wrapper'>
      <ul>
        {listItem.map((day, i) => (
          <li key={day}>
            {day}
            <button id={day} onClick={() => deleteItem(i)}>
              删除
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

方案选择建议 #

• 新项目/React版本>=16.8：优先选择函数组件+Hooks实现，开发效率更高，后续维护成本更低
• 老旧项目/React版本<16.8：使用类组件实现，完全可以满足需求

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