redux - 重新选择 - 创建一个仅用于获取部分状态的内存选择器是否有意义?

标签 redux reselect

我有一个普通的选择器,它只用于获取部分状态:

export const getAllPosts = state => {
  return state.posts;
};

如果我使用重新选择来包装选择器:
import { createSelector } from 'reselect';

export const allPosts = createSelector(
  getAllPosts,
  (posts) => posts
);

提高性能是否有意义?在我看来,包装是不必要的。

最佳答案

不,仅仅为了获取状态树的一部分而创建一个内存选择器是没有意义的。

原因是connect将对从 mapStateToProps 传入的每个 Prop 进行自己的浅层相等检查.如果选择器返回的 Prop 与其他 Prop 一起通过了浅层相等检查,则 render不会被不必要地调用。如果选择器只是返回了状态树的一部分并且状态树的那部分没有被修改,那么浅的相等检查就足够了。

但是,如果选择器是根据其他选择器的结果计算的,则使用 createSelector是一个不错的选择。首先,它为组合选择器提供了一种很好的语法。其次,如果组合选择器的计算可能很昂贵,您将获得性能优势。第三,如果选择器要返回一个新的但等效的对象或数组,那么 connect 提供的浅相等检查是不够的。在那种情况下,createSelector 的内存如果输入没有改变,provides 将确保返回相同的对象或数组实例,然后浅等式检查将足以避免代价高昂的重新渲染。

所以只是暴露部分状态树createSelector不添加任何东西。

对于从状态树的多个部分计算的几乎所有选择器createSelector开始增加值(value)。它添加的值(value)量因选择器而异,从更容易阅读到确保您不会不必要地重新渲染组件树。

关于redux - 重新选择 - 创建一个仅用于获取部分状态的内存选择器是否有意义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47155868/

相关文章:

javascript - 如何/在哪里转换 redux 应用程序中服务器的日期?

reactjs - 如何管理接受 yield select 参数的选择器?

reactjs - 如何将 Reselect 与嵌套的选择器调用一起使用

javascript - 重新选择总是重新渲染

javascript - 身份验证和 Redux/Router 的问题

javascript - 将 react 组件绑定(bind)到部分 redux 状态

reactjs - 有没有办法告诉 React/Redux 文件结构中*哪里*调用了一个操作?

javascript - 如何使用 React-router v4 以编程方式从操作创建器进行导航?

javascript - 这个错误在 Redux - Toolkit 中意味着什么?

javascript - 手动更新 redux 状态时更改了 redux 状态引用