Question

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

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

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 });
      };

OR

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

Answer 1

您可以使用

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

  return {
    list,
  };
});

如果您需要有关在状态上使用数组的更多信息，请阅读：How to manage React State with Arrays

Answer 2

修改输入通常是一种不好的做法，但是在第一个示例中进行克隆有点过头了。您实际上不需要克隆数组即可实现不变性，诸如此类：

RecyclerView

当然可以重构，我这样保留它是为了更好地说明这个想法。也就是说，您可以从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 }); };的回调中返回一个新对象并将结果分配给新变量，而不是在映射前克隆items或修改其内容。

React中哪种方法更好？

2 个答案: