Question

我正在使用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))解决了这个问题。

有人可以解释为什么会发生这种情况吗？我的印象是传播操作员创建了一个对象的克隆，直到现在我从来没有遇到任何问题。

Answer 1

react-redux连接组件执行浅层严格的相等检查以确定是否要更新。见http://redux.js.org/docs/faq/ImmutableData.html

spread运算符类似于Object.assign，并且不会深度克隆对象。 JSON工作的原因是因为你创建了一个全新的对象，它将通过严格的相等检查，但是你的所有组件都会不必要地更新，因为现在没有任何东西会通过严格的相等检查。

Object.assign（{}，... prevState，... newState）将创建一个新的顶级对象，但它不会为嵌套在prevState或newState中的任何对象创建新对象。但是，您必须仔细更新嵌套对象，以避免不必要的重新渲染。对于深层嵌套的对象和数组，这可能会变得棘手。

我建议检查用于管理状态的无缝不可变或不可变包。此外，重选库可以帮助您提取特定于组件需求的记忆对象。

对于不可变对象，传播运算符vs JSON.parse（JSON.stringify（...））

1 个答案: