Javascript 反应1000复选框-单击/重新渲染需要几秒钟

所以我正在尝试学习React，并尝试构建一个非常简单的应用程序

因此，我有一个后端API返回一个包含1000个项目的列表，每个项目都有一个名称和一个代码。 我想把名单上的所有名字都放在复选框里。 然后对所有选定的项目执行X操作-比如说，使用可选字体将名称打印到pdf文档中

有了这个，我还想要一些简单的功能，比如全选和全选

因此，由于我试图学习react，我正在研究几种不同的方法来实现这一点。 似乎没有一个是好的

所以我试着为每个复选框制作一个子组件，感觉很干净并做出反应。 这似乎是非常糟糕的性能，比如每次onChange回调需要2-3秒，所以我跳过了这个步骤

我试着在课堂上做一组排除在外的。这看起来也很慢，而且是一个糟糕的解决方案，因为像selectall和deselectall这样的东西很难实现。就像在原始列表中循环并将它们全部添加到排除集一样

另一个我没有使用的解决方案是修改原始数据数组。类似于使数据模型包含选中的布尔值以获得默认值，然后修改该值。但是数据需要是一个映射，而不是一个数组。但我有一种感觉，每当点击复选框时，这个解决方案也会非常慢。我不太明白为什么只做一个简单的复选框会这么慢

所以请告诉我如何在react中处理这个问题

几个方向性问题：

在获取数组时如何修改它，比如说向数组中的每个项添加一个checked:true变量

async componentDidMount() {
    const url = "randombackendapi";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ data: data.data, loading: false });
  }

为什么这个速度如此之慢？例如，每次单击需要3秒钟，并给我一个[违规]“单击”处理程序需要3547ms的警告。我的版本中的每一项都是一个子函数，回调速度同样慢。我怎样才能使它更快编辑这是唯一剩下的问题

    {this.state.data.map((item, key) => (
      <FormControlLabel
        key={item.code}
        label={item.name}
        control={
          <Checkbox
            onChange={this.handleChange.bind(this, item.code)}
            checked={!this.state.excludedSets.has(item.code)}
            code={item.code}
          />
        }
      />
    ))}

  handleChange = (code, event) => {
    this.setState({
      excludedSets: event.target.checked
        ? this.state.excludedSets.delete(code)
        : this.state.excludedSets.add(code)
    });
  };

我想我不明白如何以一种好的方式设计我的react组件

在获取数组时如何修改它，比如说向数组中的每个项添加一个checked:true变量

async componentDidMount() {
    const url = "randombackendapi";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ data: data.data, loading: false });
  }

一旦你有了数组，你就可以使用一个映射来添加一个选中的键，这将通过利用主数组上的映射来进行检查和一个更简单的“选择-取消选择所有”功能的实现，使这个过程更加容易

让数据=[{code:1}，{code:2}，{code:3}] 让modifiedData=data.mapitem=>{ 返回{…项，选中：false} } //modifiedData=[{code:1，checked:false}，{code:2，checked:false}，{code:3，checked:false}] 我建议将修改后的数据保存在状态中，而不是您获取的数据，因为您始终可以修改该数组，以将其以所需的格式发送回api

现在您已经使用新的选中键修改了数组，您可以像这样使用map来选择和取消选择

const handleChange=代码=>{ modifiedData=modifiedData.mapitem=>item.code==代码？{…item，选中：！item.checked}:item } 在取消全选|全选之后，您可以使用另一种映射方法来这样做

const selectAllHandler==>{ modifiedData=modifiedData.mapitem=>{ 返回{…项，选中：true} } 反之亦然

常量取消AllHandler==>{ modifiedData=modifiedData.mapitem=>{ 返回{…项，选中：false} }

---

因此，我无法让React复选框组件在每次点击时都能运行2-3秒，因此我决定只使用html复选框和纯javascript选择器来满足我的需要，非常好。

什么是this.state.excludedSets？excludedSets:new SetI提供了此解决方案，但问题是每次单击都需要2-3秒才能重新呈现页面。警告：[违规]“点击”处理程序在chrome控制台日志中花费了2688ms。只需单击“检查”按钮。所以这就是我现在要解决的主要问题。