Question

当我使用redux时，我必须关心不可变对象，但在纯粹的反应中，我经常使用map更新我的数组属性

handleAgeChangedUser = e => {
    const { users, selectedUser } = this.state;

    this.setState(
      {
        users: users.map(o => {
          return o.id === selectedUser.id ? selectedUser : o;
        })
      },
      () => {
        this.ageInput.value = "";
      }
    );
  };

演示https://codesandbox.io/s/z358py2y2p

这种方法的局限性是什么？另一种选择是什么？我记得没有es6，我必须使用loadash，或者更糟糕的是，在我必须找到索引的那一天，然后手动循环只是为了做这个简单的操作。

Answer 1

这种方法的局限性以及其他替代方案是什么？

有两个方面 - 纯技术和建筑。

首先，React默认执行浅层比较，不建议实施深度相等的逻辑（https://reactjs.org/docs/react-component.html#shouldcomponentupdate），这就是为什么immutable - 就像解决方案一样（immutable.js，seamless-immutable）允许在不损害性能的情况下解决该问题。

其次，有状态的组件本身是糟糕的体系结构解决方案，因为业务逻辑分布在许多组件之间，而数据流不是单向的，这与功能方法不兼容。因此，基于flux的基于不可变提供者的解决方案是最好的。

Answer 2

在变异的同时，你使用的是状态的相同内存分配，也就是说你使用了相同的状态引用。

例如：`

var x = 10;
    x = 20;

此处x值在分配的相同内存空间中更改为20。您实际上是在更改数据但不在此处引用。将'x'视为一个大对象，您正在对最深的键值对进行更改。既然你在国家的同一个参考文献中进行了更改。 React发现很难理解是否已对州进行了更改。

相反，如果您创建状态的新副本（内存引用）并更新其中的值。它实际上指的是不同的内存位置（内存引用），并且很容易理解状态发生了变化。

在我们的案例中，它运作正常。但在处理更大的数据时。我们将面临问题

除了这些之外，您可以对对象使用'Object.assign（）'作为数组你需要复制并对其进行更改： - ）

`

使用map与object.assign更新属性

2 个答案: