在 React 中处理状态和对象数组

Question

我们都知道 React 文档说永远不要直接改变 this.state。我想我对状态数组和不变性有一个挥之不去的问题：

如果我有一组处于状态的对象，在以任何方式改变该数组时，我是否应该始终使用immutability helper 中的this question？

或者使用[].concat() 或[].slice() 作为回答here 和here 是否完全可以接受？

我再次问这个问题是因为[].concat() 和[].slice() 确实返回了新数组，但只返回了浅拷贝数组。如果我改变数组的一个元素，它也会改变数组的状态，违反了 Reactjs 状态的第一条规则（我一直在看太多 FMA:Brotherhood）：

var arr1 = [{ name : "bill" }, { name : "chet" }];
var arr2 = arr1.slice();

// this changes both arrays
arr2[0].name = "kevin";

// check
(arr1[0].name === arr2[0].name) // => true; both are "kevin"
(arr1[0] === arr2[0])           // => true; only shallow copy

// this changes arr2 only
arr2.push({ name : "alex" });

// check again
(arr1.length === arr2.length)   // => false;
(arr1[0].name === arr2[0].name) // => still true;
(arr1[0] === arr2[0])           // => still true;

我知道插件update 在覆盖shouldComponentUpdate 时最常用，但对于我正在做的事情，我不需要覆盖该功能；我只需要通过向数组中添加新元素（使用 concat 或 slice 解决）或更改现有元素的属性（使用 React.addons.update 解决）来改变数组中保持状态的对象。

TL;DR

如果不覆盖shouldComponentUpdate，我应该何时使用React.addons.update 而不是[].slice() 或[].concat() 来改变存储在状态中的对象数组？

Answer 1

您主要需要考虑边界。如果你只在拥有它的组件中使用这个数组，并且可以选择将它作为道具传递：没关系。你可以用任何方式修改它，除非其他组件有一些严重的问题，否则它们永远不会知道其中的区别，因为当你的组件更新其状态时，它们会获得新的 props。

如果您将此数组传递给某种 api，例如通量操作创建器或作为道具传递给您的函数，那么您可能会遇到一些非常严重且难以追踪的错误。这就是不变性很重要的地方。

例如，在这种情况下，您可能希望在回调中检查某个人的某些属性，但是如果 people[0].name 可能已更改，则您有竞争条件。

function savePeople(people){
  $.post('/people/update', people, function(resp){
    if (people[0].name === ...) {
      // ...
    }
  });
}