reactjs - Redux 应用程序中每个 reducer 调用的深度复制状态有什么缺点？

Question

对 state 进行深拷贝有什么副作用吗？每次调用 reducer 函数时，在 Redux 应用程序中的 appReducer 上？
我问是因为 Immutable Update Pattern Redux 状态的文档要更新状态上的嵌套对象，您应该浅拷贝嵌套属性并更新它。
我很好奇在每个 Action 调用中对状态进行深度复制会有什么副作用。
这是一些伪代码例如

export default function appReducer(state = initialState, action){
let copiedState = JSON.parse(JSON.stringify(state))
switch(action){
  case action.UPDATE_NESTED_PROPERTY:
     copiedState.thing.anotherThing = somethingNew;
     return copiedState;
  case action.UPDATE_SOME_OTHER_NESTED_PROPERTY:
     copiedState.differentThing.nestedProperty = "updated";
     return copiedState;
  default:
     return state;
  }
}

总是深度复制状态然后返回它的方法有什么不好？我还没有看到这样做，所以我假设它有问题。如果状态是一个巨大的对象，那么我确信每次都进行深度复制可能会出现性能问题。但这会导致其他问题吗？

Answer 1

深度复制状态将导致重新创建所有 jsx，React 必须比较整个虚拟 dom 并可能重新渲染 DOM。重新渲染 DOM 是 Web 应用程序中最昂贵的操作之一，当您可以防止这种情况发生时，您应该这样做。
当一个 Action 被调度并且reducer返回一个新状态时，所有的回调都传递给useState。被调用并且当它们返回与上次不同的值时，组件将重新创建 jsx.然后 React 会将该 jsx 与上次进行比较，并可能重新绘制 DOM。
假设我有一个这样的容器:

const Container = React.memo(function Container({ id }) {
  const dispatch = useDispatch();
  //only if id changes will it re create the selector
  const selectItem = React.useMemo(
    () => createSelectItem(id),
    [id]
  );
  const item = useSelector(selectItem);
  //create remove function only when item has changed
  const remove = React.useCallback(
    //removeItem is an action creator
    () => dispatch(removeItem(item)),
    [item, dispatch]
  );
  //render component only when item changes
  return <Component item={item} remove={remove} />;
});

如果您在每个分派(dispatch)的操作上重新创建整个状态(深拷贝)，那么该代码中的任何优化都不会做任何事情。更惨的是 item改变了 remove被重新创建，这意味着 Component将在 DOM 中重新呈现，因为处理函数已更改，即使 item实际上可能没有改变它只是因为你深度复制了状态而改变了。