Fork me on GitHub

前端状态管理工具redux dva mobx对比

目录

前言

由于dvajs是基于redux, mobx是近两年出现准备代替redux。 所以先从redux开讲。

⊙ Redux是什么

状态管理工具就是一个用来管理数据的类库
大牛把后端 MVC 的开发思维搬到前端,将应用中所有的动作与状态都统一管理,让一切有据可循

Redux 与传统后端 MVC 的对照

Redux 传统后端 MVC
store 数据库实例
state 数据库中存储的数据
dispatch(action) 用户发起请求
action: { type, payload } type 表示请求的 URL,payload 表示请求的数据
reducer 路由 + 控制器(handler)
reducer 中的 switch-case 分支 路由,根据 action.type 路由到对应的控制器
reducer 内部对 state 的处理 控制器对数据库进行增删改操作
reducer 返回 nextState 将修改后的记录写回数据库

⊙ 为什么要用Redux & 什么情况下需要使用Redux

React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。有两个方面,它没涉及。

  • 代码结构
  • 组件之间的通信

对于大型的复杂应用来说,这两方面恰恰是最关键的。因此,只用 React 没法写大型应用。

什么情况下需要使用Redux

如果你的UI层非常简单,没有很多互动,Redux 就是不必要的,用了反而增加复杂性。下面这些情况,都不需要使用 Redux。

  • 用户的使用方式非常简单
  • 用户之间没有协作
  • 不需要与服务器大量交互,也没有使用 WebSocket
  • 视图层(View)只从单一来源获取数据

如果使用场景是 多交互多数据源, 类似下面的情况就应该使用Redux了

  • 用户的使用方式复杂
  • 不同身份的用户有不同的使用方式(比如普通用户和管理员)
  • 多个用户之间可以协作
  • 与服务器大量交互,或者使用了WebSocket
  • View要从多个来源获取数据

从组件角度看,如果你的应用有以下场景,可以考虑使用 Redux。

  • 某个组件的状态,需要共享
  • 某个状态需要在任何地方都可以拿到
  • 一个组件需要改变全局状态
  • 一个组件需要改变另一个组件的状态

发生上面情况时,如果不使用 Redux 或者其他状态管理工具,不按照一定规律处理状态的读写,代码很快就会变成一团乱麻。你需要一种机制,可以在同一个地方查询状态、改变状态、传播状态的变化。

Redux、dva、mobx对比

xxx …


参考链接

redux-simple-tutorial
阮一峰的Redux 入门教程

-------------本文结束感谢您的阅读-------------

发布时间:2018年08月02日 - 18:08

最后更新:2018年08月03日 - 12:08

原始链接:https://xn--v4q63d8za.xn--6qq986b3xl/前端状态管理工具redux-dva-mobx对比/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

谢谢您给我买糖吃~