首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么在这个@ngrx示例中需要重新选择createSelector?

在这个@ngrx示例中,需要重新选择createSelector的原因是为了优化性能和提高代码的可维护性。

createSelector是@ngrx/store库中的一个函数,用于创建可记忆的选择器函数。选择器函数可以从应用状态中选择特定的数据,并将其转换为需要的格式。在应用状态发生变化时,选择器函数会自动重新计算,以确保数据的准确性。

重新选择createSelector的主要目的是避免不必要的计算和重复的数据转换。当应用状态中的某个数据发生变化时,如果没有重新选择createSelector,那么所有使用该选择器函数的地方都会重新计算和转换数据,即使这些地方实际上并不需要更新。这样会导致性能下降和不必要的资源消耗。

通过重新选择createSelector,可以将选择器函数的计算结果缓存起来,并在下次调用时直接返回缓存的结果。这样,只有当选择器函数的输入参数发生变化时,才会重新计算和转换数据,避免了不必要的计算和重复的数据转换,提高了性能。

此外,重新选择createSelector还可以提高代码的可维护性。通过将选择器函数与具体的数据转换逻辑分离,可以使代码更加模块化和可复用。当需要修改数据转换逻辑时,只需要修改选择器函数的定义,而不需要修改所有使用该选择器函数的地方,减少了代码的维护成本。

总结起来,重新选择createSelector在@ngrx示例中的作用是优化性能和提高代码的可维护性,避免不必要的计算和重复的数据转换,提高应用的响应速度和用户体验。

推荐的腾讯云相关产品:无

参考链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 接入 NGRX 状态管理

NGRX 状态管理包含了两条变更状态的主线: 同步变更状态:用户 => Action => Reducer => Store(State); 异步变更状态:用户 => Action => Effects...:调试的工具,需要配合github.com/reduxjs/red… 使用; @ngrx/schematics:提供使用 NGRX 的 CLI 命令,需要与 Angular 进行整合使用; 安装命令:...} from '@ngrx/store'; 使用导入的函数创建适用于 User 的 Selector: import { createFeatureSelector, createSelector }...( selectUser, (state: State) => state.name ); 进入模拟场景: 模拟这样一个场景:组件加载完成后首先执行添加 User 的 Action, 5 秒之后执行删除... app.component.ts 构造函数中注入 Store: import { Store } from '@ngrx/store'; export class AppComponent {

19410

146. 精读《React Hooks 数据流》

这个原因是 Counter.useContainer 提供的数据流是一个引用整体,其子节点 foo 引用变化后会导致整个 Hook 重新执行,继而所有引用它的组件也会重新渲染。...答案是会变,因为 user 对象每次数据流更新都会变,useSelector deepEqual 作用下没有触发重渲染,但因为全局 reducer 隐去组件自己的重渲染依然会重新执行此函数,此时拿到的...看上去很美好,然而实战你可能发现没有那么美好,因为上面的例子都建立 Selector 完全不依赖外部变量。...,我们需要尽可能将用到外部变量的地方抽象成一个通用 Selector,并作为 createSelector 的一个先手环节。...但 userSelector 提供给多个组件使用时缓存会失效,原因是我们只创建了一个 Selector 实例,因此这个函数还需要再包装一层高阶形态: import { createSelector }

70820

angular4实战(4)ngrx

本次演示的示例为通过ngrx的状态管理来控制HTTP请求服务的全局loading动画显示。...ChangeDetectionStrategy 组建变化的检查策略,以上述代码为例,当为ChangeDetectionStrategy设置OnPush时,组件就不会一直进行脏检查了,而是当输入属性变化时,才会启动检查策略,这里值的注意的是,这个输入的对象需要变化成一个新对象时...name:j_bleach}=>{name:bleach} 或者输入属性为一个数组的时候[1,2,3]=>[1,2,3].push(4) 以上这两种方式都不会引发angular的检查策略(前提是元数据设置了...高中英语水平翻译一下:async这个管道,会返回订阅的Observe ,promise对象的最新的值,当观察者发现值有改变时,就会触发组件的检查策略,并且组件销毁时也会自动的去取消订阅避免内存泄漏。...本例,如果把async这个过滤器取消的话,会造成一直loading,因为组件无法监听到控制loading值的改变,也就无法更新视图了。

1.1K30

React应用优化:避免不必要的render

shouldComponentUpdate React组件的生命周期方法中提供了一个钩子shouldComponentUpdate,这个方法默认返回true,表示需要重新执行render方法并使用其返回的结果作为新的...如果shouldComponentUpdate使用不当,实现的判断并不正确,会导致产生数据更新而界面没有更新、二者不一致的bug,“合适的时候返回false”是使用这个方法最需要注意的点。...幸而大部分情况下都可以选择另外一个相对代价较小的做法:使用 JavaScript原生语法或方法对不可变数据更友好的那些部分。...以一个Todo List应用为例,全局的state通过list存放所有项,而组件VisibleList需要展示未完成项。...这时即便组件ListshouldComponentUpdate方法对props进行比较,得到的结果也是不相等的,从而触发重新render。

1.3K20

学习react-redux,看这篇文章就够啦!

例如,一个电商系统,当用户点击购买按钮时,我们可以创建一个名为 "PURCHASE" 的 action 来描述这个操作。...组件内部,我们通过映射关系的 props,可以获取到 state 的数据。 mapStateProps 会订阅 Store ,每当 store 更新时,会重新计算 UI 组件参数,重新渲染组件。...下面是常用的 hooks 函数以及用法 # useSelector useSelector:用于选择 Redux store 感兴趣的状态。它接受一个选择器函数作为参数,并返回选择器函数返回的值。... React Redux ,可以使用该钩子函数对选择器函数进行记忆化,以避免不必要的重复计算。...示例用法: import { useSelector } from 'react-redux'; import { createSelector } from 'reselect'; const selectData

24220

聊聊两个状态管理库 Redux & Recoil

相对于整个应用程序的其他原子和选择器,该字符串应该是唯一的。 default:atom的初始值。 atom 是存储状态的最小单位, 一种合理的设计是, atom 尽量小, 保持最大的灵活性。...Recoil 的作者, ReactEurope video 也介绍了以后一种封装定atom 的方法: export const itemWithId = memoize(id => atom...相对于整个应用程序的其他原子和选择器,该字符串应该是唯一的. get:作为对象传递的函数{ get },其中get是从其他案atom或selector检索值的函数。...Rocil 可以做到 O(1) 的更新是因为,当atom数据变化时,只有订阅了这个 atom 的组件需要re-render。...code const task = useSelector(taskSelector(id)); 不过这里的一个小问题是,state变化时,taskSelector 也会重新计算, 不过我们可以用createSelector

3.3K10

2019 前端框架对比及评测

本文不考虑框架的流行程度,RealWorld 仓库列出的前端框架皆纳入对比范围。 [RealWorld 前端框架] 测度 性能 应用显示内容、可以使用需要花多久? 尺寸 应用有多大?...Angular+ngrx 只计算了 libs 目录的 .ts 和 .html 文件,如果你认为这么算不对,请告诉我正确的数字及其计算方法。...A: 选择你不了解的框架! FAQ 1. 为什么不对比框架 X、Y、Z? 因为 RealWorld 仓库 的实现不完整。考虑下贡献代码!用你最喜欢的库/框架实现一下,我们会在下次对比包含它们!...RealWorld 的意思是这个应用会像真实世界项目一样,连接一个服务器,认证用户,允许用户增删改查。 3. 你为什么没纳入我最喜欢的框架? 请回过头去看看上文的第一问。...为什么没有对比某个流行得多的框架? 再一次,看看前面的问题。很简单,RealWorld 仓库 的实现不完整。 感谢 Rich Harris 和 Richard Feldman 发表前审阅本文。

1.3K00

对开源框架跃跃欲试,却在写的时候犯了难?

今天 HelloGitHub 给大家带来的开源项目:RealWorld,就是为了帮助你解决“把玩开源框架难”的问题,让你忘记痛苦和遗憾,重新唤起那颗“蠢蠢欲动”、热爱技术的心。...它是一个由多种不同开源框架,以单独(前端/后端)或相互组合(全栈)的方式,实现一个类似博客的知识分享平台——Conduit 的示例项目集合。...所以我分别从 前端、后端、客户端 分类,挑选了几个相对不错的项目,方便大家参考和学习。 二、实战项目 下面是我翻遍了整个 RealWorld 项目,筛选出的精品项目。...q=realworld 三、最后 整理这些开源项目的过程,我发现了很多听都没听说过的开源框架,比如 Java 的 RESTful Web 框架:Dropwizard,这个项目竟然有 8.2k Star...正所谓 千里之行始于足下——《道德经》 也只有掌握了基础的功能,才能玩转这些开源框架,从而扩充你的武器库,应对不同场景和多变的需求,能够做到举重若轻泰然自若。

57610

redux 文档到底说了什么(下)

const fetchTodos = () => async (dispatch: Dispatch) => { dispatch(setLoading({status: true, tip: '加载....因此这里隆重介绍 redux 一直推荐的 redux-toolkit,这是官方提供的一揽子工具,这些工具并不能带来很多功能,只是将上面的手动档都变成自动档了。...这个 selector 其实就是依赖了 todos 和 filter 嘛,那能不能实现 useCallback 那样,只要 todos 和 filter 不变,那就不需要 todos.filter(.....不过 redux-toolkit 提供了一个 createSelector,那还用个屁的 Reselect。...这些东西要不就是更好规范 redux 代码,要不就是dispatch(action) -> UI 更新 这个流程再多加流程,它们的最终目的都是为了更自动化地管理状态/数据,相信理解了这个思路再看那些

75820

【译】Redux + React 应用程序架构的 3 条规范(内附实例)

这就意味着,如果我需要修改 todos 相关的东西,我可以单独工作在这个模块而不用考虑应用的其他部分。从感觉上来说,这就像是主应用程序里面创建了另外一个应用程序。...比如说, projects 模块内部,我们需要从 todos 的状态里面获取信息从而渲染组件。...当然,我们依旧需要维护我们的 selector 契约,但另一种选择则必须从一大堆不相干的组件中进行搜索并依次对其重构。...不论什么时候,你想要使用这块毛团的一个小模块,你都别无选择只能陷入这种巨大的混乱当中。而且更糟糕的是,当你需要修改毛团当中的某些东西,要想不破坏其他东西的话就变得很难了。...Action 类型 Redux 当中只是一些字符串常量。唯一修改的地方就是我给每个类型都加上了 todos/ 前缀,以便于给这个模块创造一个命名空间。这就避免了跟应用其他模块的名字发生冲突。

66390

写在 2021: 值得关注学习的前端框架和工具库

你可能同样犹豫要不要学这玩意,我的意见是:学!因为确实NodeJS目前没有特别全面的框架(虽然NestJSSpring面前也是弟弟)。...TS这个工具的主要能力就是生成TS的类型定义,同时它的插件体系还提供了更多的额外能力,如Apollo-Client的插件,让你可以直接使用封装好的的useXXXQuery等,前端连查询语句都不用写了...Nx Cloud[76],Nx(详细介绍见下面)提供的云平台,主要功能是项目达到一定规模,导致构建耗时较长时,避免每个开发人员要重新自己本地构建一次项目,而是从云端下载已构建完成的文件,以此来提高效率...PNPM[80],实际上是包管理工具,但内置了Monorepo支持,我也在用这个(强烈安利),想要了解可以看看三元的这篇文章:为什么现在我更推荐pnpm而不是 npm/yarn ?...Reactive.How[92],生动的展示RxJS Observable操作符管道的流动,入门期间使用有奇效。

4.2K10

redux、mobx、concent特性大比拼, 看后生如何对局前辈

,就写export function,需要副作用函数就写export async function。...,用户不需要不知道observable等相关术语和概念,某一次渲染你取值有了点这个值的依赖,而下一次渲染没有了对某个stateKey的取值行为就应该移出依赖,这一点vue做得很好,为了让react拥有更优雅...查看concent示例 查看更多关于ctx.effect 回顾与总结 依赖收集这一个回合,concent的依赖收集形式、和组件表达形式,和mobx区别都非常大,整个依赖收集过程没有任何其他多余的api...介入, 而mbox需用computed修饰getter字段,函数组件需要使用useObserver包状态返回UI,concent更注重一切皆函数,组织计算代码的过程消除的this这个关键字,利用fnCtx...我们都知道vue里已内置了这个概念,暴露了一个可选项computed用于处理计算过程并缓存衍生数据,react并无此概念,redux也并不提供此能力,但是redux开放的中间件机制让社区得以找到切入点支持此能力

4.6K61
领券