开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

对于redux reducer来说，哪个更快: switch还是map？

对于redux reducer来说，switch语句通常比map函数更快。

switch语句是一种条件语句，根据给定的表达式的值来选择执行相应的代码块。它是编译器友好的，可以直接跳转到正确的代码块，因此执行速度较快。

而map函数是一种高阶函数，它接收一个函数作为参数，对数组中的每个元素进行处理，并返回一个新的数组。在redux reducer中使用map函数时，需要对每个action类型进行遍历和匹配，然后执行相应的逻辑，这会导致额外的函数调用和遍历操作，可能会降低性能。

综上所述，对于redux reducer来说，通常使用switch语句比使用map函数更快。但在某些特定情况下，如果reducer逻辑非常复杂且分支较多，使用map函数可能会更清晰和易于维护。

在腾讯云的产品中，与云计算相关的服务有云服务器（CVM）、对象存储（COS）、云数据库 MySQL版（CDB）等。这些产品可提供云计算的基础设施和服务，帮助开发者构建稳定、高效的应用程序。具体产品介绍和相关链接如下：

云服务器（CVM）：提供可靠、可弹性伸缩的云端计算服务，支持多种实例规格和操作系统镜像，适用于Web应用、大数据分析、游戏托管等场景。详情请参考：云服务器
对象存储（COS）：提供海量、安全、低成本的云端存储服务，适用于图片、音视频、备份归档等数据存储和访问需求。详情请参考：对象存储
云数据库 MySQL版（CDB）：提供高性能、可扩展的云端关系型数据库服务，支持自动备份、容灾和性能优化等功能，适用于各类应用程序的数据存储和管理。详情请参考：云数据库 MySQL版

请注意，以上提到的产品仅是腾讯云的一部分，该答案并不代表对其性能或推荐度的评价。在实际选择时，建议根据具体需求和项目情况进行综合考虑和评估。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解

Redux三大原则唯一数据源状态只读数据改变只能通过纯函数（reducer）完成 Redux核心api Redux主要由三部分组成：store，reducer，action。...一般来说你会通过 store.dispatch() 将 action 传到 store. Action 本质上是 JavaScript 普通对象。...对于小应用来说，使用字符串做 action type 更方便些。不过，在大型应用中把它们显式地定义成常量还是利大于弊的。参照减少样板代码获取更多保持代码简洁的实践经验。...，请看此博文： [OHIF-Viewers]医疗数字阅片-医学影像-中间插播一下-es6-使用const加箭头函数声明函数相对于function声明函数有什么好处？...switch 和样板代码须知 switch 语句并不是严格意义上的样板代码。

3.7K1 0

使用 React Hooks 代替 Redux

对于想学习 React 的同学，无疑是增加了 Redux 的学习成本，更加深了 React 的门槛与神秘值「这可不是一个优秀的开源库该有的特质」。...当时 React 最新的版本还是 16.7.0-alpha.2。...在对于数据处理上，我尝试了新的 React Context API，使用 Context API 提供的 Provider 和 Consumer 的方法，去实现代替 Redux 的数据处理方案「这也是网上大部分推荐的代替...依赖注入，而是用 useContext redux 在 action 之后改变视图本质上还是 state 注入的方式修改的组件内部 state，而 hooks 则是一对一的数据触发 hooks 的 reducer...我们根据 action 更新 state，还是那么熟悉的味道，那么熟悉的 switch 函数。

1.6K1 0

《彻底掌握redux》之开发一个任务管理平台

虽然我们不使用redux也可以通过react的state和父子props进行基本的数据通信和项目开发，但是对于一个大型项目而言，往往考虑的更多的是代码结构和组件之间的通信，我们需要一种很优雅且有利于扩展的方式去开发我们的复杂系统...编写reducer函数 const reducer = (state = initState, action) => { switch (action.type) { case 'INCREMENT...当然如果只使用以上几种方式我们还是不能将state传递给容器组件，我们需要react-redux提供的Provider组件，它可以让容器组件拿到state。...= { ASVANCED: null } // 经过编译后 const Type = {a: null} 这样会使得我们的代码体积更小，执行的更快。...关于具体如何写一个中间件，这里不会详细介绍，我们主要来说说如何使用redux的中间件机制。

1.1K3 0

React性能优化三篇之一

简单的说就是Redux能够管理js app的状态，状态是由数据维护的，也就是说Redux是管理数据的。那么Redux是怎么管理数据的呢？...在Redux内，每执行一次dispatch，所有的reducer都会执行。 reducer 所以这里就有个问题，如果reducer比较多的时候，性能是不是就会出问题。...const dispatcher = (state={}, action) { switch (action.type) { case "TYPE1": case "TYPE2":...var Immutable = require('immutable'); var map1 = Immutable.Map({a:1, b:2, c:3}); var map2 = map1.set(...每次执行dispatch，通过subscribe注册的listener都会被执行，如果listener较多，或者listener内部处理比较复杂也会对性能产生影响，而且在listener内部很难区分哪个数据被改变了

5452 0

状态管理的概念，都是纸老虎

而 Reducer 是一个纯函数，对于相同的输入，永远都只会有相同的输出，不会影响外部的变量，也不会被外部变量影响，不得改写参数。...reduce 是一个函数式编程的概念，经常和 map 放在一起说，简单来说，map 就是映射，reduce 就是归纳。...Reducer，对于大型应用来说，State 必然十分庞大，导致 Reducer 函数也十分庞大，所以需要做拆分。...处理异步对于异步操作来说，有两个非常关键的时刻：发起请求的时刻，和接收到响应的时刻（可能成功，也可能失败或者超时），这两个时刻都可能会更改应用的 state。...一般来说，小项目建议 MobX 就够了，大项目还是用 Redux 比较合适。总结时光荏苒，岁月如梭。每一个框架或者库只能陪你走一段路，最终都会逝去。

5.3K2 0

前端工程师的20道react面试题自检

key使 React处理列表中虛拟DOM时更加高效，因为 React可以使用虛拟DOM上的key属性，快速了解元素是新的、需要删除的，还是修改过的。...redux有action、reducer的概念，action为唯一修改state的来源，reducer为唯一确定state如何变化的入口，这使得redux的数据流非常规范，同时也暴露出了redux代码的复杂...但是，随着项目的不断变大，mobx也不断暴露出了它的缺点，就是数据流太随意，出了bug之后不好追溯数据的流向，这个缺点正好体现出了redux的优点所在，所以针对于小项目来说，社区推荐使用mobx，对大项目推荐使用...Children. map（ props. children，( )=>)而不是props. children. map ( ( ) => )？...这时就需要借助 Switch> 来做到只显示一个匹配组件：import { Switch, Route} from 'react-router-dom'Switch> <Route path=

9064 0

Redux（一）：基本概念

import {createStore } from 'redux'; const store = createStore(reducer); 二、state是只读的唯一改变state的方法就是触发action...随着应用规模的增长，所要维护的state树会变的很大，这样就需要把reducers拆分成多个reducer，每个reducer来维护状态树的一部分。...所以我们的reducer需要对这三种情况做判断。...所以，在redux中不应该使用如：push、pop、slice等方法。对于数组可以用concat、拓展运算符、map等；对于对象可以用Object.assign()、拓展运算符等。...总结：可以看到Redux使用的是派发/监听的设计模式，每次派发action，reducer运算结束后会执行在subscribe注册的回调函数。

1.3K1 0

如何更优雅地使用 Redux

[1504578055622_3363_1504578056110.png] 图：Redux 对项目的模块拆分从这种意义上来说，它是成功的，但是实际的开发过程中，却遇到很多问题，导致开发体验非常不友好...1、丑陋的switch case 做过 Redux 开发的一定对 Reducer 不陌生，里面主要靠 switch case 来处理 action。...对于一个状态复杂的应用，一般使用 combineReducers来进行模块拆分，进而减少switch case的长度，使得模块化的 Reducer 可维护。...} = state; let selectedSet = new Set(); if (isCheck) { list.map...二、如何更优雅地使用经历了很多项目，我观察到 Reducer 的一个代码特点，大量的 switch case 下都是简单的数据加工合成新的状态子树，这里可以通过统一的扩展覆盖方式来实现这个目标。

2.7K1 0

一文梭穿Vuex、Flux、Redux、Redux-saga、Dva、MobX

reduce 是一个函数式编程的概念，经常和 map 放在一起说，简单来说，map 就是映射，reduce 就是归纳。...Reducer，对于大型应用来说，State 必然十分庞大，导致 Reducer 函数也十分庞大，所以需要做拆分。...中各子 Reducer 都是由根 Reducer 统一管理的，每个子 Reducer 的变化都要经过根 Reducer 的整合：简单来说，Redux有三大原则：单一数据源：Flux 的数据源可以是多个...处理异步对于异步操作来说，有两个非常关键的时刻：发起请求的时刻，和接收到响应的时刻（可能成功，也可能失败或者超时），这两个时刻都可能会更改应用的 state。...一般来说，小项目建议 MobX 就够了，大项目还是用 Redux 比较合适。总结时光荏苒，岁月如梭。每一个框架或者库只能陪你走一段路，最终都会逝去。

5.5K1 0

redux 文档到底说了什么（上）

前言最近又认真重读了一遍 redux 的文档，不出意料，还是一样的晦涩难懂。...对于复杂的页面也只是多个资源的增，删，改，查，所以 todo app 是一个非常好的样例。...上面的 reducer 代码可以改写成： const todosReducer = (todos: TTodo[] = initTodos, action: any) => { switch (action.type...写数据写数主要还是要 dispatch action，可以用 useDispatch 来获取 dispatch 函数。...redux 不推荐在 reducer 里写发请求的代码。这些代码应该都放在 action creator 里的。

2K2 0

46. 精读《react-rxjs》

+ 1), dec$.map(() => (state: number) => state - 1) ) const store$ = createStore("example", reducer...reducer，整个 store 对应 Observable.merge，switch case 的地方被 inc、dec const reducer$: Observablereducer 与 redux 的 reducer 一摸一样： const pingReducer = (state = { isPinging: false }, action) => { switch...但是 react-rxjs 抛开了 redux 繁琐的样板代码，而 redux-observable 样板代码只会比 react-redux 要多。...总的来说，笔者认为 rxjs 还是难以落地到 react 业务代码中，究其本质，就是没有 cyclejs 这种机制解决数据源引起的循环依赖问题。

1.3K2 0

完全理解 redux（从零实现一个 redux）

请一定先忘记 reducer、store、dispatch、middleware 等等这些名词。 redux 是一个状态管理器。 Let's Go！...所有的计划写在一个 reducer 函数里面，会导致 reducer 函数及其庞大复杂。按经验来说，我们肯定会按组件维度来拆分出很多个 reducer 函数，然后通过一个函数来把他们合并起来。...但是还有个问题， state 我们还是写在一起的，这样会造成 state 树很庞大，不直观，很难维护。我们需要拆分，一个 state，一个 reducer 写一块。...exceptionMiddleware; 3、现在的代码有一个很严重的问题，就是 exceptionMiddleware 里面写死了 loggerMiddleware，我们需要让 next(action)变成动态的，随便哪个中间件都可以...return funcs[0] } return funcs.reduce((a, b) => (...args) => a(b(...args))) } 当然 compose 函数对于新人来说可能比较难理解

6372 0

完全理解 redux（从零实现一个 redux）

请一定先忘记 reducer、store、dispatch、middleware 等等这些名词。 redux 是一个状态管理器。 Let's Go！...所有的计划写在一个 reducer 函数里面，会导致 reducer 函数及其庞大复杂。按经验来说，我们肯定会按组件维度来拆分出很多个 reducer 函数，然后通过一个函数来把他们合并起来。...但是还有个问题， state 我们还是写在一起的，这样会造成 state 树很庞大，不直观，很难维护。我们需要拆分，一个 state，一个 reducer 写一块。...exceptionMiddleware; 3、现在的代码有一个很严重的问题，就是 exceptionMiddleware 里面写死了 loggerMiddleware，我们需要让 next(action)变成动态的，随便哪个中间件都可以...return funcs[0] } return funcs.reduce((a, b) => (...args) => a(b(...args))) } 当然 compose 函数对于新人来说可能比较难理解

8341 0

【React】360- 完全理解 redux（从零实现一个 redux）

请一定先忘记 reducer、store、dispatch、middleware 等等这些名词。 redux 是一个状态管理器。 Let's Go！...所有的计划写在一个 reducer 函数里面，会导致 reducer 函数及其庞大复杂。按经验来说，我们肯定会按组件维度来拆分出很多个 reducer 函数，然后通过一个函数来把他们合并起来。...但是还有个问题， state 我们还是写在一起的，这样会造成 state 树很庞大，不直观，很难维护。我们需要拆分，一个 state，一个 reducer 写一块。...exceptionMiddleware; 3、现在的代码有一个很严重的问题，就是 exceptionMiddleware 里面写死了 loggerMiddleware，我们需要让 next(action)变成动态的，随便哪个中间件都可以...return funcs[0] } return funcs.reduce((a, b) => (...args) => a(b(...args))) } 当然 compose 函数对于新人来说可能比较难理解

7642 0

完全理解 redux

请一定先忘记 reducer、store、dispatch、middleware 等等这些名词。 redux 是一个状态管理器。 Let's Go！...所有的计划写在一个 reducer 函数里面，会导致 reducer 函数及其庞大复杂。按经验来说，我们肯定会按组件维度来拆分出很多个 reducer 函数，然后通过一个函数来把他们合并起来。...但是还有个问题， state 我们还是写在一起的，这样会造成 state 树很庞大，不直观，很难维护。我们需要拆分，一个 state，一个 reducer 写一块。...exceptionMiddleware; 3、现在的代码有一个很严重的问题，就是 exceptionMiddleware 里面写死了 loggerMiddleware，我们需要让 next(action)变成动态的，随便哪个中间件都可以...return funcs[0] } return funcs.reduce((a, b) => (...args) => a(b(...args))) } 当然 compose 函数对于新人来说可能比较难理解

8952 0

完全理解 redux（从零实现一个 redux）

请一定先忘记 reducer、store、dispatch、middleware 等等这些名词。 redux 是一个状态管理器。 Let's Go！...所有的计划写在一个 reducer 函数里面，会导致 reducer 函数及其庞大复杂。按经验来说，我们肯定会按组件维度来拆分出很多个 reducer 函数，然后通过一个函数来把他们合并起来。...但是还有个问题， state 我们还是写在一起的，这样会造成 state 树很庞大，不直观，很难维护。我们需要拆分，一个 state，一个 reducer 写一块。...exceptionMiddleware; 3、现在的代码有一个很严重的问题，就是 exceptionMiddleware 里面写死了 loggerMiddleware，我们需要让 next(action)变成动态的，随便哪个中间件都可以...return funcs[0] } return funcs.reduce((a, b) => (...args) => a(b(...args))) } 当然 compose 函数对于新人来说可能比较难理解

7642 0

redux 文档到底说了什么（下）

手动 Normalization: 将 todos 数据结构变成 {ids: [], entities: {}} 结构使用 redux-thunk 来做异步，手动返回函数手动使用表驱动来替换 reducer...的 switch-case 模式手动将 selector 进行封装成函数手动引入 immer，并使用 mutable 写法以前的写法理解起来真的不难，因为这种做法是非常纯粹的，基本就是 JavaScript...createSlice 上面的代码我们看到是用 combineReducers 来组装大 reducer 的，前文也说过 todos, filter, loading 其实都是各自的 slice，redux-toolkit...builder 其实到这里我们对 [fetchTodos.fulfilled.toString()] 的写法还是不满意，为啥要搞个 toString() 出来？真丑。...网上有些声音是讨论该用 createAction + createReducer 还是直接上 createSlice 的。如果分不清哪个好，那就用 createSlice。

7842 0

一天梳理React面试高频知识点

key使 React处理列表中虛拟DOM时更加高效，因为 React可以使用虛拟DOM上的key属性，快速了解元素是新的、需要删除的，还是修改过的。...（1）获取URL的参数get传值路由配置还是普通的配置，如：'admin'，传参方式如：'admin?id='1111''。...编译版本中 React会忽略 propType 验证以及其他的告警信息，同时还会降低代码库的大小，React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息在 Reducer文件里，对于返回的结果...在 Reducer文件里，对于返回的结果，必须要使用 Object.assign ( )来复制一份新的 state，否则页面不会跟着数据刷新。...本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖。

2.8K2 0

【小狮子前端】「Redux」概念理解+实战上手（内含大量实例）

哈哈哈怎么可能呢对于已经使用redux的：首先在redux没有给出对hooks较好支持之前，大多不会为了hooks来完全重构项目吧，顺便一讲重构可能造成的问题： - 失去很多connect()提供的自动引用缓存...redux总结为什么还是要用redux？...简单来说：Redux 提供了应对大型应用的代码组织和调试能力，在程序出错时，能帮你快速定位问题。...总结作为一个之前vue技术栈转react技术栈的菜鸟来说，还是踩了一些的坑的：比如在有了vuex的基础之后，然后有没有理解清楚理解redux，很容易觉得他两差不多，但实际还是有挺多区别的，也是我深入学习...Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。从实现原理上来说，最大的区别是两点： Redux 使用的是不可变数据，而Vuex的数据是可变的。

1.4K0 0

React进阶(1)-理解Redux

并不是必需的,但是使用Redux却是一劳永逸的,管理组件的状态方便得多,对于大型应用来说,单纯使用原始的数据传递方式那么组件之间的传值会变得非常复杂,如果要做一个大型的应用,那么就需要在React的基础上配置一个数据层的框架进行结合的使用...如果改为右边的Redux处理方式,将红色圆圈组件的状态数据放到一个Store仓库当中集中进行管理,哪个组件需要的话,直接派发给哪个组件就可以了的....其实本质上来说,是放到reducer里面去管理,Store从Reducer中拿到返回的数据state,最后供外部组件的取用当红色圆圈组件想要改变数据传递给其他组件时,只需要去改变Store里面的存储红色圆圈组件的数据就可以了...的写法,可以不用Redux了的,也有类似于dva这样的框架,基于Redux以及中间件(Redux-saga)的数据流方案但是Redux依然是主流,只要你能够应付项目中开发需求,哪个用得爽就用哪个的,...Redux虽然确实是绕了一些,有时候在各个文件之间进行来回切换,对于模块化的拆分,如果不是很清楚Redux的使用流程,无论是后续维护还是迭代升级,都挺痛苦的本篇并不是什么高大上的内容,比较浅显,概念性的文字比较多

1.5K2 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭