我正在使用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操作符创建了对象的克隆,直到现在,我从来没有遇到过任何问题。
2条答案
按热度按时间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库是目前最好的状态管理库之一
gupuwyp22#
spread操作符通常用于制作JS对象的深层副本。当对象中有嵌套数组或嵌套数据时,spread操作符会创建顶层数据的深层副本和嵌套数据的浅层副本。而JSON.parse(JSON.stringify(obj))也会做嵌套数据的深拷贝。