redux 对于不可变对象,Spread运算符与JSON.parse(JSON.stringify(...))

2cmtqfgy  于 2023-06-23  发布在  其他
关注(0)|答案(2)|浏览(127)

我正在使用Redux,最近遇到了一个问题,我在向数组添加消息时,Redux状态没有在React上发出重新呈现。我使用的是react-redux库。下面是我遇到的问题的一个例子:

// State structure
structure: { messages: {}, groups: {} }

// ---
newState = { ...prevState };
newState.messages[action.message.group] = action.message;
return newState;

这是在更新状态,但它没有触发对react组件的更新,但是将newState = { ...prevState }替换为newState = JSON.parse(JSON.stringify(prevState))解决了这个问题。
有谁能详细解释一下为什么会这样?在我的印象中,spread操作符创建了对象的克隆,直到现在,我从来没有遇到过任何问题。

2wnc66cl

2wnc66cl1#

react-redux连接的组件进行浅层严格相等检查,以决定它们是否要更新。参见http://redux.js.org/docs/faq/ImmutableData.html
spread操作符类似于Object.assign,它不会深度克隆对象。JSON之所以有效,是因为你创建了一个全新的对象,它可以通过严格的相等性检查,但是所有的组件都将不必要地更新,因为现在没有任何组件可以通过严格的相等性检查。
Object.assign({},... prevState,... newState)将创建一个新的顶级对象,但它不会为prevState或newState中嵌套的任何对象创建新对象。但是,您必须小心地更新嵌套对象,以避免不必要的重新渲染。对于深度嵌套的对象和数组,这可能会很棘手。
我建议检查无缝不可变或不可变的包来管理状态。此外,重新选择库可以帮助您提取特定于组件需求的备忘录化对象。

更新08/16/2020

immer库是目前最好的状态管理库之一

gupuwyp2

gupuwyp22#

spread操作符通常用于制作JS对象的深层副本。当对象中有嵌套数组或嵌套数据时,spread操作符会创建顶层数据的深层副本和嵌套数据的浅层副本。而JSON.parse(JSON.stringify(obj))也会做嵌套数据的深拷贝。

相关问题