比Redux更容易上手的状态管理库

简介: 前言当项目越发复杂时,我们发现仅仅是提升状态已经无法适应如此复杂的状态管理了,程序状态变得比较难同步,操作,到处是回调,发布,订阅,这意味着我们需要更好的状态管理方式,于是就引入了状态管理库,如Redux,Mobx,Jumpsuit,Alt.js等。

前言


当项目越发复杂时,我们发现仅仅是提升状态已经无法适应如此复杂的状态管理了,程序状态变得比较难同步,操作,到处是回调,发布,订阅,这意味着我们需要更好的状态管理方式,于是就引入了状态管理库,如Redux,Mobx,Jumpsuit,Alt.js等。

Mobx是什么


对于我来说Mobx几乎和Vue一样,通过监听数据的属性变化,可以通过直接在数据上更改就能触发UI的渲染,从而做到MVVM、响应式、上手快,Api简单等等。
  • 安装 npm install mobx --save
  • 原则

在这里插入图片描述


mobx支持单向数据流也就是动作改变状态,而状态的改变会更新所有受影响的视图。如下图

在这里插入图片描述

一个简单的react+mobx的计算实例


npm install mobx-react --save // 下载mobx
import { observable, action } c // 应用mobx
const counter = {
    state: observable({
        count: 0
    }),
        
    add: action(function() {
        this.state.count ++ 
    })
}
export default counter

// 这时候 counter的结构是这样的
{
    state: { count: 0 }
    add: function
}

// 现在我们将mobx和react联系起来;
import { observer } from 'mobx-react'
import counter from './counter'
const CouterView = () => {
return (
    <div>
      <span>{ counter.state.count }</span> //这里的count时计数器里的数据
          <button onClick={() => counter.add()} > + </button> // 点击按钮会把数字加1
        </div>
    )
}

export default observer(CouterView);
// 这样就实现了一个简单的mobx的数据管理库

小结


在mobx中没有reducer这一层,所以不需要为了action和reducer之间的通信而使代码高度抽象。
mobx里state的更新是很直观的,通过赋值行为即可,而不需要dispatch或者setState这样的方法。


写的不详细,如有需要者,请前往官方文档

来源:https://segmentfault.com/a/1190000017026373

相关文章
|
6月前
|
存储 前端开发 JavaScript
【第39期】一文认识React的状态管理库
【第39期】一文认识React的状态管理库
166 0
|
6月前
|
JavaScript 前端开发 数据管理
第三十四章 使用react-redux进一步管理状态
第三十四章 使用react-redux进一步管理状态
|
1月前
|
存储 JavaScript 前端开发
Redux 状态管理入门
本文介绍了 Redux,一个广泛使用的 JavaScript 状态管理库,重点讲解了其核心概念(如 Store、Action、Reducer 等)、基本使用方法、常见问题及解决策略,并通过代码示例详细说明了如何在 React 应用中集成和使用 Redux。
33 1
|
6月前
|
存储 资源调度 JavaScript
阿珊解析Vuex:实现状态管理的利器
阿珊解析Vuex:实现状态管理的利器
|
3月前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
79 0
|
4月前
|
JavaScript 前端开发 中间件
Redux Toolkit:简化Redux应用状态管理
Redux Toolkit 是官方推荐用来简化Redux开发的工具集。它包含了一些预设的最佳实践,使得创建和管理Redux状态变得更简单。
54 1
|
前端开发 JavaScript 中间件
React状态管理库—— zustand 为啥这么简单易用🚀
React状态管理库—— zustand 为啥这么简单易用🚀
|
6月前
|
JavaScript 前端开发
【干货分享】轻松入门 Redux:解密状态管理的神奇世界
【干货分享】轻松入门 Redux:解密状态管理的神奇世界
|
6月前
|
资源调度 JavaScript
如何使用 Vuex 管理应用的状态?
如何使用 Vuex 管理应用的状态?
31 3
|
6月前
|
JavaScript API
Vue3新的状态管理库-Pinia(保姆级别教程)
Vue3新的状态管理库-Pinia(保姆级别教程)
296 0