reselect的createSelector:它对嵌套对象进行深度比较吗



如果redux中的second(嵌套对象(发生更改,该怎么办?如果进行浅层次比较,则应忽略更改而不重新渲染。

我在doc中看到的所有例子都是基于一个简单的对象,其中浅层比较是可以的

// assume state is:  {data: {first : {second { } } }}
const selectData = state => state.data;
const selectSecond = createSelector(
selectData,
data => data
);

createSelector使用严格相等(===(,这意味着两个对象被认为是"等于";当且仅当它们是对内存中同一对象的引用。这与React在比较stateuseEffect依赖关系时使用的检查类型相同。

浅相等意味着如果两个对象的所有属性都严格相等,则它们是相等的。

深度相等意味着,无论对象引用如何,如果两个对象的内容相同,则它们是相等的。它的计算成本很高,而且由于数据的不可变性质,在React或Redux中几乎从不需要它。


Redux状态被认为是不可变的,因此您永远不应该出现对象在内存中是相同引用但具有不同内容的情况。每次特性更改时,都必须创建一个新对象。如果second已更改,则firstdata将是新对象。

如果redux中的"second"(嵌套对象(发生更改怎么办?如果它做了肤浅的比较,它应该忽略变化,而不是重新提交。

只有当你的状态发生突变时,你才会遇到这个问题。只要您的reducer是正确的,那么每当state.data发生更改时,您都会得到重新转发器,因为任何更改都需要创建一个新对象。


以下是各种相等检查的几个示例:

state => state

state是严格相等、浅相等和深相等的。

state => ({...state})

CCD_ 11是浅相等和深相等的。它不是严格相等的,因为它是一个新对象。

state => ({...state, nested: {...state.nested}})

CCD_ 12深度相等。它不是严格相等或浅相等,因为nested属性是一个新对象。

state => ({...state, number: 5})

state的属性已更改,因此无法通过所有相等性检查。

state => {
state.nested.number = 5;
return state;
}

这种突变在React或Redux中是不允许的。state是严格相等的,因为我们返回了相同的state对象。它也是浅相等的,因为state.nested是相同的对象。它不是完全相等的(除非之前的值为5(。

state => {
state.nested = 5;
return state;
}

同样,这是不允许的。如果更改顶级属性,则state是严格相等的,但不是浅相等或深相等。

相关内容

  • 没有找到相关文章

最新更新