纯函数：状态内容与状态引用答案

【问题标题】：Pure functions: state content vs. state reference纯函数：状态内容与状态引用
【发布时间】：2017-07-09 11:23:21
【问题描述】：

In this pen，我很难理解为什么在新创建的 const（第 24 行）上使用 push 函数时，使用扩展运算符还是简单地复制“状态”很重要。用state替换[...state]怎么会导致state被newState的内容覆盖？

如果将 state 直接传递给 newState，那么我假设它是 state 的 reference 是否正确？ IE。在const newState = state的情况下

【问题讨论】：

值得一提的是，在复制数组时，展开语法只有一级深。如果你有更深的层次，你所谓的“副本”只会引用它们，它不会是真正的副本。

标签： javascript arrays react-redux

【解决方案1】：

我假设这是您引用的部分或笔：

const newState = [...state]; // copy contents of state, NOT the reference to it (state)
newState.push(action.payload);
return newState;

让我们看看这段代码现在的作用与使用const newState = state 时的作用之间的区别。

const newState = [...state];

这一行创建了一个名为newState 的新数组，其内容为state。它本质上是一个单一的衬里：

const newState = [];

for (let i = 0; i < state.length; i++) {
    newState.push(state[i]);
}

当newState.push(action.payload)被调用时，state数组不变，而newState有一个额外的元素被压入其中。

const newState = state;

这一行将变量newState 设置为与state 相同的引用，因此只有一个数组在起作用。

当newState.push(action.payload)被调用时，新元素被压入数组，所以newState和state都发生了变化。

【讨论】：

【解决方案2】：

像这样使用扩展运算符将从state 中获取所有项目，并使用这些项目创建一个新数组。所以state 和newState 将引用不同的数组（它们具有相同的元素，因此如果其中一个元素是一个对象并且您更改了它的一个属性，那么该更改将在另一个数组中可见）。写入 const newState = state 将导致一个数组和对该数组的两个引用，因为您不会在任何地方创建第二个数组。

【讨论】：

同样好，如果可能有两个，将标记为答案，谢谢！