Question

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

我是否正确假设是引用表示如果状态直接传递给newState则会被覆盖？即在const newState = state

的情况下

Answer 1

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

Answer 2

我认为这是你引用的部分或笔：

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 个答案: