我有一个普通的选择器,仅用于获取状态的一部分:
export const getAllPosts = state => {
return state.posts;
};
如果我使用重新选择来包装选择器:
import { createSelector } from 'reselect';
export const allPosts = createSelector(
getAllPosts,
(posts) => posts
);
它对提高性能有任何意义吗?在我看来,包装器是不必要的。
不,仅仅为了获取状态树的一部分而创建记忆选择器是没有意义的。
原因是connect
将对传入的每个 prop 进行自己的浅层相等性检查mapStateToProps
。如果选择器返回的 props 与其他 props 一起通过了浅层相等性检查,那么render
不必要时不会被调用。如果选择器只是返回状态树的一部分并且状态树的该部分没有被修改,那么浅层相等检查就足够了。
但是,如果选择器是根据其他选择器的结果计算的,则使用createSelector
是一个不错的选择。首先,它为编写选择器提供了一个很好的语法。其次,如果组合选择器的计算可能很昂贵,您将获得性能优势。第三,如果选择器要返回一个新的但等效的对象或数组,则由connect
还不够。在这种情况下,记忆createSelector
如果输入没有改变,则提供将确保返回相同的对象或数组实例,然后浅层相等检查将足以避免昂贵的重新渲染。
所以只暴露状态树的一部分createSelector
不添加任何东西。
对于几乎所有从状态树的多个部分计算的选择器createSelector
开始增值。它添加的价值量根据选择器的不同而有所不同,从更容易阅读到确保不会不必要地重新渲染组件树。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)