文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

[7ubphc64vb.png] 序言 redux、mobx本身是一个独立的状态管理框架，各自有自己的抽象api，以其他UI框架无关（react, vue...）...，本文主要说的和react搭配使用的对比效果，所以下文里提到的redux、mobx暗含了react-redux、mobx-react这些让它们能够在react中发挥功能的绑定库，而concent本身是为了...react贴身打造的开发框架，数据流管理只是作为其中一项功能，附带的其他增强react开发体验的特性可以按需使用，后期会刨去concent里所有与react相关联的部分发布concent-core，它的定位才是与...所以其实将在本文里登场的选手分别是 redux & react-redux slogan： JavaScript 状态容器，提供可预测化的状态管理 设计理念： 单一数据源，使用纯函数修改状态 [iyv1qcjfq6...任何可以从应用程序状态派生的内容都应该派生，揭示了一个的的确确存在且我们无法逃避的问题，大多数应用状态传递给ui使用前都会伴随着一个计算过程，其计算结果我们称之为衍生数据。

4.9K61

React进阶(3)-上手实践Redux-如何改变store中的数据

前言 在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的数据,实现页面的更新...(   applyMiddleware() )); 以上两种方法都可以开启Redux的调试功能,第二种方法比较强大,推荐使用,这种配置完后,在各个浏览器都是可以使用的,至于其他一些额外拓展功能的,在后续的文章中...,会不断会讲到 具体更改store的实例代码如下所示: import React from 'react'; import ReactDOM from 'react-dom'; import { Input...的一个小小的初探,在真正实际项目中,复杂度远不止像这样的一个例子的,但是作为入门,todolist确实能让自己对Redux有一定的认识 也许你会觉得这么个简单的例子,竟然这么多代码,使用vue的话,几行代码就搞定了...,Vue中也有vuex这样的数据流管理框架,使用起来也是大同小异,两个各有优点,都很强 使用React编写代码更偏向底层一些的,虽然Redux比较绕,但都是有固定的套路流程的,其中理解Redux的工作流程是非常重要的

3.3K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    React 设计模式 0x1：组件

    # useState useState 是 React 中最常用的 hook 之一，它用于在函数式组件中存储状态值（对象、字符串、布尔值等），这些值在组件的生命周期中进行变更。...useEffect 接受两个参数，分别是： 带有可选的返回语句的函数 可选的返回语句是一个函数，它在组件卸载时执行，用于进行清理工作，如定时器、事件监听器等 可选的依赖项数组 当不传入依赖项数组时，...React 组件的内容。...Redux 是一个开源的 JavaScript 库，它保持全局状态以使应用程序具有一致的行为。...当您需要进行复杂状态更改时，可以使用 useReducer 方法。 useReducer 方法接受参数为初始状态和操作，返回当前状态和 dispatch 方法。

    1.5K10

    这个 hook api，曾吓退许多前端开发者

    有许多前端开发者因为讨厌他而放弃了 React。但怪就怪在，很多大佬会觉得这个方案非常厉害。 他就是 redux....许多项目开始放弃使用 redux，寻找其他的替代品，例如，基于数据劫持的 Mobx，使用更简单的 zustand，官方团队推出的 Recoil，以及我自己封装 Moz Moz 对 TS 的支持非常完善，...react hooks 的底层实现也大量借鉴了 redux 的思路，可能你在使用层面看到的是 useState，但是底层实现里还是 redux，react hooks 也提供了一个与 redux 概念几乎一样的...，一个是更改存储的草稿内容。...一个是新增一项更改列表，因此我们设计 action 为 { type: 'changed_draft', nextDraft: e.target.value } // 内容从草稿状态中获取即可

    47410

    React进阶(3)-上手实践Redux-如何改变store中的数据

    撰文 | 川川 前言 在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的数据...的调试功能,第二种方法比较强大,推荐使用,这种配置完后,在各个浏览器都是可以使用的,至于其他一些额外拓展功能的,在后续的文章中,会不断会讲到 具体更改store的实例代码如下所示: import React...'){ // 对原有的state进行一个深拷贝,在redux中,redux是不允许直接修改state的,但可以接收state,这也是为什么当我们拿到state后,我们需要拷贝一份数据...结语 本文并不是什么高大上的内容,主要是对学习Redux的一个小小的初探,在真正实际项目中,复杂度远不止像这样的一个例子的,但是作为入门,todolist确实能让自己对Redux有一定的认识 也许你会觉得这么个简单的例子...,竟然这么多代码,使用vue的话,几行代码就搞定了,Vue中也有vuex这样的数据流管理框架,使用起来也是大同小异,两个各有优点,都很强 使用React编写代码更偏向底层一些的,虽然Redux比较绕,但都是有固定的套路流程的

    2.8K20

    React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理

    撰文 | 川川 前言 撰文:川川 在前面的几小节中已经完成了一个todolist的添加,删除的操作,通过把组件的数据放到了Redux中的公共存储区域store中去存储,在Redux中进行状态数据的更新修改...改变store的数据唯一办法就是派发action,调用store.dispatch方法,也知道通过getState方法获取store中的所有状态数据,而实现组件页面的更新与store保持同步,必须得触发注册...(动作类型)都是放在一个文件当中进行编写的,然而更改store可能有多个action动作,所有代码杂糅在一起,后期维护起来显然是非常痛苦的 所以有必要进行将Redux代码进行按照特定的职责,功能结构进行拆分的...中的store,action,以及reducer分离开来，各自独立的管理,职责分明,如果项目比较简单,一开始是可以写在一块的,然后一点的拆分出去的 如果不是老司机,一开始一上来就拆分,如果对Redux的工作流程不是很清晰...,编写action,拆分action代码,其中获取store就用getState方法,而更改store就要通过dispatch派发action,这个流程是固定的 要理解Store是用来存储组件的公共数据状态的

    2.1K10

    React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理

    image.png 前言 在前面的几小节中已经完成了一个todolist的添加,删除的操作,通过把组件的数据放到了Redux中的公共存储区域store中去存储,在Redux中进行状态数据的更新修改...改变store的数据唯一办法就是派发action,调用store.dispatch方法,也知道通过getState方法获取store中的所有状态数据,而实现组件页面的更新与store保持同步,必须得触发注册...(动作类型)都是放在一个文件当中进行编写的,然而更改store可能有多个action动作,所有代码杂糅在一起,后期维护起来显然是非常痛苦的 所以有必要进行将Redux代码进行按照特定的职责,功能结构进行拆分的...store,action,以及reducer分离开来，各自独立的管理,职责分明,如果项目比较简单,一开始是可以写在一块的,然后一点的拆分出去的 如果不是老司机,一开始一上来就拆分,如果对Redux的工作流程不是很清晰...,编写action,拆分action代码,其中获取store就用getState方法,而更改store就要通过dispatch派发action,这个流程是固定的 要理解Store是用来存储组件的公共数据状态的

    2.3K11

    使用Redux和React-redux在React中进行状态管理

    npm i redux react-redux redux：Redux用于管理状态 react-redux：用于在react和redux库之间进行绑定。...Redux遵循不变性，这意味着我们不改变应用程序状态，而不是返回 新的应用程序状态。 Redux在单个JavaScript对象中管理整个应用程序状态。... 组件使用react context API通过组件树向下传递状态。 从组件访问Redux状态 现在我们可以直接从React组件访问我们的redux状态。...通过使用状态参数， 我们可以访问在reducer函数内部定义的redux状态。...我们可以App作为来访问组件内部的这两个属性props。 现在让我们在浏览器中对其进行测试。 错误处理 我们还可以通过ERROR在reducer函数中创建一个类型来处理错误。

    4.3K30

    谈谈 React 5种最流行的状态管理库

    Mobx MobX React Lite Docs[7] 代码行数: 30 因为我在使用 Redux 之后使用了MobX React， 所以它一直是我最喜欢的管理 React 状态库之一。...多年来，两者之间的明显差异，但是对我而言我不会改变我的选择。 MobX React 现在有一个轻量级版本（MobX React Lite），这个版本专门针对函数组件而诞生，它的有点是速度更快，更小。...Redux React Redux docs[13] 代码行数:33 Redux 是整个 React 生态系统中最早，最成功的状态管理库之一。我已经在许多项目中使用过Redux，如今它依然很强大。...Redux 实践 开始使用Redux前，先安装依赖： npm install @reduxjs-toolkit react-redux 要使用 Redux，您需要创建和配置以下内容： A store...对我来说，Redux 起初很难学习。一旦我熟悉了框架，就可以很容易地使用和理解它。

    3.2K20

    【react】203-十个案例学会 React Hooks

    useState 保存组件状态 在类组件中，我们使用 this.state 来保存组件状态，并对其修改触发组件重新渲染。...通过传入新状态给函数来改变原本的状态值。值得注意的是 useState 不帮助你处理状态，相较于 setState 非覆盖式更新状态，useState 覆盖式更新状态，需要开发者自己处理逻辑。...而在 React Hooks 中，我们可以使用 useContext 进行改造。... ); } useReducer useReducer 这个 Hooks 在使用上几乎跟 Redux/React-Redux 一模一样，唯一缺少的就是无法使用 redux 提供的中间件...可以认为 ref 在所有 Render 过程中保持着唯一引用，因此所有对 ref 的赋值或取值，拿到的都只有一个最终状态，而不会在每个 Render 间存在隔离。

    3.6K20

    React 进阶 - React Redux

    # React-Redux，Redux，React 三者关系 Redux Redux 是一个应用状态管理 js 库，它本身和 React 是没有关系的 Redux 可以应用于其他框架构建的前端应用，甚至也可以应用于...Vue 中 React-Redux React-Redux 是连接 React 应用和 Redux 状态管理的桥梁 React-redux 主要做两件事 如何向 React 应用中注入 redux...： 上述 Demo 无法满足状态共用的情况 正常情况不可能将每一个需要状态的组件都用 subscribe / unSubscribe 来进行订阅 比如 A 组件需要状态 a，B 组件需要状态 b ，那么改变...a，只希望 A 组件更新，不希望 B 组件更新，显然上述是不能满足的 所以为了解决上述诸多问题，React-Redux 就应运而生了。...: boolean, } # React-Redux 实现状态共享 通过在根组件中注入 store ，并在 useEffect 中改变 state 内容 export default function

    1.7K10

    React进阶(5)-分离容器组件,UI组件(无状态组件)

    Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的 在本节中,你将学习到,如何拆分容器组件,UI组件(无状态组件),让组件尽可能的保持功能的单一,减少组件的状态的 容器组件...(聪明组件) 在使用Redux中,无非就是做两件事情 如何获取store的状态(组件中通过getState方法获取),并且初始化组件的状态(在Reducer纯函数中初始化),同时还需要监听store...的状态改变(通过store触发subscribe函数),当组件需要更改store状态时,需要通过dispatch派发action对象,然后在Reducer纯函数里面根据state以及action,返回最新的...函数返回的内容,直接返回一个组件的,而子组件的渲染通过外部的props值给传进去,关注render函数的返回内容 import React, { Component } from 'react'; import...,并没有严格的条条框框限定,这也并不是React独有的功能,在父组件中获取状态数据,而通过自定义属性props的方式,在组件内部通过this.props或者props进行接收,这样能够减少组件的状态分散在各处的

    1.9K00

    用动画和实战打开 React Hooks（三）：useReducer 和 useContext

    ) 进行选择 onLastDaysChange 是用户通过 input 修改处理过去 N 天时的事件处理函数 接着，我们需要一个辅助函数来对历史数据进行一些转换处理。...而 Redux 的核心思想之一就是将状态放到唯一的全局对象（一般称为 Store）中，而修改状态则是调用对应的 Reducer 函数去更新 Store 中的状态，大概就像这样： 上面这个动画描述的是组件...反观 Redux，它的核心思想就是将状态和修改状态的操作全部集中起来进行。 有没有发现，这其实刚好对应了两种管理学思想 Context 和 Control？...Control 就是将权力集中起来，员工们只需有条不紊地按照 CEO 的决策执行相应的任务，就像 Redux 中的全局 Store 是”唯一的真相来源“（Single Source of Truth），...所有状态和数据流的更新必须经过 Store；而 Context 就是给予各部门、各层级足够的决策权，因为他们所拥有的上下文更充足，专业度也更好，就像 React 中响应特定逻辑的组件具有更充足的上下文，

    2K30

    React进阶(5)-分离容器组件,UI组件(无状态组件)

    Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的 在本节中,你将学习到,如何拆分容器组件,UI组件(无状态组件),让组件尽可能的保持功能的单一,减少组件的状态的 · 正...· 文 · 来 · 啦 · ♚ 容器组件(聪明组件) 在使用Redux中,无非就是做两件事情 如何获取store的状态(组件中通过getState方法获取),并且初始化组件的状态(在Reducer...纯函数中初始化),同时还需要监听store的状态改变(通过store触发subscribe函数),当组件需要更改store状态时,需要通过dispatch派发action对象,然后在Reducer纯函数里面根据...函数返回的内容,直接返回一个组件的,而子组件的渲染通过外部的props值给传进去,关注render函数的返回内容 import React, { Component } from 'react'; import...React独有的功能,在父组件中获取状态数据,而通过自定义属性props的方式,在组件内部通过this.props或者props进行接收,这样能够减少组件的状态分散在各处的 【自我介绍】 作者:川川

    1.4K10

    (1) 定义和共享模块状态

    虽然学习和使用过redux和mbox之类的状态管理库，阅读此篇文章会更容易理解，但是没有使用过任何状态管理库的用户也能极速入门concent，真正的0障碍学会使用它并接入到你的react应用里。...简单到无以复加，简单到和react保持100%一致，让新手无需理解额外的概览，以react组件的编写方式就能接入状态管理，但是呢也保留了更高级的抽象接口，让老手可以按照redux的模式去组织代码。...run 定义模块 concent和redux一样，有一个全局单一的状态树，是一个普通的json对象，不过第一层key规划为模块名，来帮助用户按照业务场景将状态切分为多个模块，便于分开管理。...和setState，方便用户可以0改动原组件的代码，仅使用register装饰一下类组件即可接入状态管理，这就是0障碍学会使用并接入到react应用的基础，对于初学者来说，你会写react组件，就已经会使用了...，所以首次渲染之前它的值将被替换为模块里的Hello world，实际上这里可以不声明这个类成员变量state，写上它只是为了保证删除register装饰器这个组件也能正常工作，而不会得到一个undefined

    98540
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券