javascript - 为什么要求总是返回带有新内部引用的新对象

Question

Redux 要求始终从 reducer 返回新状态。例如，我有以下状态:

let initialState = {
   prop: 3,
   internalReferenceProp: {a:3}
}

以及修改internalReferenceProp的reducer。可以实现此 reducer 以仅更改 state 对象引用或同时更改 state 和 internalProperty:

function(state=initialState, action) {
  // changing only state reference
  let newState = Object.assign({}, state);
  newState.internalReferenceProp.a = 7;
  return newState;

  // changing both state and internalReferenceProp reference
  return Object.assign({}, state, {internalReferenceProp: {a:7}})
}

有人告诉我第一种方法不正确，所以我的问题是要求还更改内部引用的背后原因是什么？我知道我应该更改 state 引用，因为它允许轻松比较以检测 state 是否已更改，但为什么要更改内部引用？

Answer 1

第一个显然不正确，因为 Object.assign 进行的是浅拷贝，而不是深拷贝。

// changing only state reference
let newState = Object.assign({}, state);

newState === state // false
newState.internalReferenceProp === state.internalReferenceProp // true

state.internalReferenceProp.a // 3
newState.internalReferenceProp.a = 7 // 7
state.internalReferenceProp.a // 7

你可以这样看，如果我们在 newState 中更改某些内容，它也会在 state 中更改。如果组件只对 internalReferenceProp 感兴趣，这将使更改无法检测到。这也称为“副作用”，是一种不好的做法。

简而言之，如果您的输入(在本例中为 state)发生任何变化，这称为副作用，在 redux 中是错误的。

这是一个不好的例子:

let data = getData(); // from redux

return (
  <ChildComponent someProp={data.internalReferenceProp} />
);

如果我们使用带有副作用的版本，ChildComponent 将永远不会重新渲染，因为它的属性没有改变。 oldData.internalReferenceProp === newData.internalReferenceProp。