Javascript React中哪种方法更好？

下面两个代码的作用完全相同，但方式不同。输入组件上有一个onChange事件侦听器。在第一种方法中，我从状态浅克隆项目，然后对其进行更改，一旦更改完成，我将使用clonedItems和changed属性更新项目

在第二种方法中，我没有克隆，只是对状态项进行更改，然后相应地更新状态。由于在react中直接不使用setState更改状态属性不会调用更新生命周期，所以我觉得第二种方法更好，因为这样可以节省克隆的一些开销

handleRateChange = (evnt: React.ChangeEvent<HTMLInputElement>) => {
        const {
          dataset: { type },
          value,
        } = evnt.target;
        const { items } = this.state;
        const clonedItems = Array.from(items);
        clonedItems.map((ele: NetworkItem) => {
          if (ele.nicType === type) {
            ele.rate = Number(value);
          }
        });
        this.setState({ items: clonedItems });
      };

或

---

修改输入通常是一种不好的做法，但是第一个示例中的克隆有点过分。您实际上不需要克隆阵列来实现不变性，类似这样的情况如何：

handleRateChange = (evnt: React.ChangeEvent<HTMLInputElement>) => {
        const {
          dataset: { type },
          value,
        } = evnt.target;
        const { items } = this.state;

        const processedItems = items.map((ele: NetworkItem) => {
          if (ele.nicType === type) {
            return {
              ...ele,
              rate: Number(value)
            };
          } else {
            return ele;
          }
        });

        this.setState({ items: processedItems });
      };

当然，它是可以重构的，我留下来是为了更好地说明这个想法。也就是说，您可以从映射的回调返回一个新对象，并将结果分配给一个新变量，而不是在映射之前克隆项或修改其内容。

您可以使用此

this.setState(state => {
  const list = state.list.map(item => item + 1);

  return {
    list,
  };
});

---

如果您需要关于在状态上使用数组的更多信息，请阅读以下内容：

我共享的代码正在修改数组本身中的对象，如果需要的话，我不会获取子集。

this.setState(state => {
  const list = state.list.map(item => item + 1);

  return {
    list,
  };
});