Mobx-React : 当前最适合React的状态管理工具

 

MobX

简单、可扩展的状态管理

      

MobX 是由 Mendix、Coinbase、Facebook 开源和众多个人赞助商所赞助的。

  

安装

浏览器支持

  • MobX >=5 版本运行在任何支持 ES6 proxy 的浏览器。如果运行在像 IE11、Node.js 6 以下版本或依靠与较旧的 JavaScripCore 的安卓端的 React Native (点击查看如何升级])。
  • MobX 4 可以运行在任何支持 ES5 的浏览器上,而且也将进行持续地维护。MobX 4 和 5 的 API 是相同的,并且语义上也能达到相同的效果,只是 MobX 4 存在一些 局限性

小贴士: MobX 5 包的主入口点附带 ES5 代码,以便向后兼容所有构建工具。但因为 MobX 5 只能运行在现代浏览器上,所以可以考虑使用速度最快、体积最小的 ES6 构建: lib/mobx.es6.js 。例如,通过设置 webpack 的别名: resolve: { alias: { mobx: __dirname + "/node_modules/mobx/lib/mobx.es6.js" }}

入门指南

入门

MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:

任何源自应用状态的东西都应该自动地获得。

其中包括UI、数据序列化、服务器通讯,等等。

React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

对于应用开发中的常见问题,React 和 MobX 都提供了最优和独特的解决方案。React 提供了优化UI渲染的机制, 这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。MobX 提供了优化应用状态与 React 组件同步的机制,这种机制就是使用响应式虚拟依赖状态图表,它只有在真正需要的时候才更新并且永远保持是最新的。

核心概念

MobX 的核心概念不多。 下面的代码片段可以在 codesandbox 示例中在线试用。

Observable state(可观察的状态)

Egghead.io 第1课: observable & observer

MobX 为现有的数据结构(如对象,数组和类实例)添加了可观察的功能。 通过使用 @observable 装饰器(ES.Next)来给你的类属性添加注解就可以简单地完成这一切。

1 import { observable } from "mobx";
2
3 class Todo {
4 id = Math.random();
5 @observable title = "";
6 @observable finished = false;
7 }

使用 observable 很像把对象的属性变成excel的单元格。 但和单元格不同的是,这些值不只是原始值,还可以是引用值,比如对象和数组。

如果你的环境不支持装饰器语法,也不必担心。 你可以点击这里查看如何进行设置。 或者你可以直接跳过设置,因为 MobX 可以通过 decorate 工具在不支持装饰器语法的情况加使用。 尽管如此,多数 MobX 用户更喜欢装饰器语法,因为它更简洁。

例如,上面一段代码的ES5版本应该是这样:

 1 import { decorate, observable } from "mobx";
2
3 class Todo {
4 id = Math.random();
5 title = "";
6 finished = false;
7 }
8 decorate(Todo, {
9 title: observable,
10 finished: observable
11 })

Computed values(计算值)

Egghead.io 第3课: 计算值

使用 MobX, 你可以定义在相关数据发生变化时自动更新的值。 通过@computed 装饰器或者利用 (extend)Observable 时调用 的getter / setter 函数来进行使用。(当然,这里也可以再次使用 decorate来替代 @ 语法)。

1 class TodoList {
2 @observable todos = [];
3 @computed get unfinishedTodoCount() {
4 return this.todos.filter(todo => !todo.finished).length;
5 }
6 }

当添加了一个新的todo或者某个todo的 finished 属性发生变化时,MobX 会确保 unfinishedTodoCount 自动更新。 像这样的计算可以类似于 MS Excel 这样电子表格程序中的公式。每当只有在需要它们的时候,它们才会自动更新。

Reactions(反应)

Egghead.io 第9课: 自定义反应

Reactions 和计算值很像,但它不是产生一个新的值,而是会产生一些副作用,比如打印到控制台、网络请求、递增地更新 React 组件树以修补DOM、等等。 简而言之,reactions 在 响应式编程命令式编程之间建立沟通的桥梁。

React 组件

Egghead.io 第1课: observable & observer

如果你用 React 的话,可以把你的(无状态函数)组件变成响应式组件,方法是在组件上添加 observer 函数/ 装饰器. observer由 mobx-react 包提供的。

 1 import React, {Component} from 'react';
2 import ReactDOM from 'react-dom';
3 import {observer} from 'mobx-react';
4
5 @observer
6 class TodoListView extends Component {
7 render() {
8 return <div>
9 <ul>
10 {this.props.todoList.todos.map(todo =>
11 <TodoView todo={todo} key={todo.id} />
12 )}
13 </ul>
14 Tasks left: {this.props.todoList.unfinishedTodoCount}
15 </div>
16 }
17 }
18
19 const TodoView = observer(({todo}) =>
20 <li>
21 <input
22 type="checkbox"
23 checked={todo.finished}
24 onClick={() => todo.finished = !todo.finished}
25 />{todo.title}
26 </li>
27 )
28
29 const store = new TodoList();
30 ReactDOM.render(<TodoListView todoList={store} />, document.getElementById('mount'));

observer 会将 React (函数)组件转换为它们需要渲染的数据的衍生。 使用 MobX 时没有所谓的智能和无脑组件。 所有的组件都会以巧妙的方式进行渲染,而只需要一种简单无脑的方式来定义它们。MobX 会确保组件总是在需要的时重新渲染,但仅此而已。所以上面例子中的 onClick 处理方法会强制对应的 TodoView 进行渲染,如果未完成任务的数量(unfinishedTodoCount)已经改变,它将导致 TodoListView进行渲染。 可是,如果移除 Tasks left 这行代码(或者将它放到另一个组件中),当点击 checkbox 的时候 TodoListView 就不再重新渲染。你可以在 JSFiddle 中自己动手来验证这点。

自定义 reactions

使用autorunreaction 和 when 函数即可简单的创建自定义 reactions,以满足你的具体场景。

例如,每当 unfinishedTodoCount 的数量发生变化时,下面的 autorun 会打印日志消息:

autorun(() => {
console.log("Tasks left: " + todos.unfinishedTodoCount)
})

MobX 会对什么作出响应?

为什么每次 unfinishedTodoCount 变化时都会打印一条新消息?答案就是下面这条经验法则:

MobX 会对在执行跟踪函数期间读取的任何现有的可观察属性做出反应

想深入了解 MobX 是如何知道需要对哪个可观察属性进行响应,请查阅 理解 MobX 对什么有反应

Actions(动作)

Egghead.io 第5课: actions

不同于 flux 系的一些框架,MobX 对于如何处理用户事件是完全开明的。

  • 可以用类似 Flux 的方式完成
  • 或者使用 RxJS 来处理事件
  • 或者用最直观、最简单的方式来处理事件,正如上面演示所用的 onClick

最后全部归纳为: 状态应该以某种方式来更新。

当状态更新后,MobX 会以一种高效且无障碍的方式处理好剩下的事情。像下面如此简单的语句,已经足够用来自动更新用户界面了。

从技术上层面来讲,并不需要触发事件、调用分派程序或者类似的工作。归根究底 React 组件只是状态的华丽展示,而状态的衍生由 MobX 来管理。

1 store.todos.push(
2 new Todo("Get Coffee"),
3 new Todo("Write simpler code")
4 );
5 store.todos[0].finished = true;

尽管如此,MobX 还是提供了 actions 这个可选的内置概念。 如果你现在就想要了解如何编写 actions,请阅读 Actions 章节。很简单! 使用 actions 是有优势的: 它们可以帮助你把代码组织的更好,还能在状态何时何地应该被修改这个问题上帮助你做出明智的决定。

MobX: 简单且可扩展

MobX 是状态管理库中侵入性最小的之一。这使得 MobX的方法不但简单,而且可扩展性也非常好:

使用类和真正的引用

使用 MobX 不需要使数据标准化。这使得库十分适合那些异常复杂的领域模型(以 Mendix 为例: 一个应用中有大约500个领域类)。

保证参照完整性

因为数据不需要标准化,所以 MobX 会自动跟踪状态和衍生之间的关系,你可以免费获得参照完整性。渲染通过三级间接寻址访问的数据?

没有问题,MobX 会跟踪它们,一旦其中一个引用发生了变化,就会重新渲染。作为回报,陈年的老bug已不复存在。作为一个程序员,你可能记不住修改的一些数据可能会影响到的某个角落里看起来毫不相关的组件,但 MobX 不会。

更简单的 actions 更便于维护

正如上面所演示的,使用 MobX 修改状态是非常简单的。你只需简单的写出你的目的。MobX 会替你处理好剩下的事情。

细粒度的可观测性是高效的

MobX 构建应用中所有衍生的图形,以找到保持最新状态所需的重新计算的最少次数。“衍生一切”或许听上去开销很昂贵,但 MobX 构建虚拟衍生图以保持衍生与状态同步所需的重计算的数量最小化。

事实上,在 Mendix 测试 MobX 时我们发现使用这个库跟踪代码中的关系通常会更有效,而不是通过使用手写事件或基于容器组件的“智能”选择器来推送更改。

简单来说,是因为 MobX 会在数据上建立更细粒度的“监听器”,而不是通过程序来控制。

其次, MobX 看到衍生之间的因果关系,因此它可以为衍生排序,使得衍生不会运行多次或引入缺陷。

想了解这是如何工作的? 请参见 深入剖析 MobX

易操作性

MobX 使用原生 javascript 。由于它的侵入性不强,它可以和绝大部分 javascript 库共同使用,而不需要特定的 MobX 风格库。

所以你可以继续使用你的路由,数据获取和工具库,比如react-router、 director、 superagent、 lodash,等等。

出于同样的原因,你可以在服务器端和客户端使用它,也可以在 react-native 这样的同构应用中使用。

结论就是: 相比其它状态管理解决方案,当使用 MobX 时通常只需学习更少的新概念。

React的状态管理工具的更多相关文章

  1. Mobx-React : 当前适合React的状态管理工具

    MobX 简单.可扩展的状态管理        MobX 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商所赞助的.    安装 安装: npm install mobx ...

  2. Mobx | 强大的状态管理工具 | 可以用Mobx来替代掉redux

    来源简书 电梯直达 https://www.jianshu.com/p/505d9d9fe36a Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情 ...

  3. react的状态管理

    近两年前端技术的发展如火如荼,大量的前端项目都在使用或转向 Vue 和 React 的阵营, 由前端渲染页面的单页应用占比也越来越高,这就代表前端工作的复杂度也在直线上升,前端页面上展示的信息越来越多 ...

  4. 状态管理工具对比vuex、redux、flux

    1.为什么要使用状态管路工具  在跨层级的组件之间传递信息,尤其是复杂的组件会非常困难.也不利于开发和维护,这时我们就a需要用到状态管理工具.     2.Flux

  5. 对于React各种状态管理器的解读

    首先我们要先知道什么是状态管理器,这玩意是干啥的? 当我们在多个页面中使用到了相同的属性时就可以用到状态管理器,将这些状态存到外部的一个单独的文件中,不管在什么时候想使用都可以很方便的获取. reac ...

  6. react+redux状态管理实现排序 合并多个reducer文件

    这个demo只有一个reducer 所以合并reducer这个demo用不到 ,但是我写出来这样大家以后可以用到,很好用,管理多个reducer,因为只要用到redux就不会只有一个reducer所以 ...

  7. React + MobX 状态管理入门及实例

    前言 现在最热门的前端框架,毫无疑问是React. React是一个状态机,由开始的初始状态,通过与用户的互动,导致状态变化,从而重新渲染UI. 对于小型应用,引入状态管理库是"奢侈的&qu ...

  8. vuex状态管理工具

    父子组件之间的通信  props传递  父 向子单向传递:且每次 父组件更新时  子组件的props会跟着更新: 如果需要 子组件把数据传递给父组件,就需要在子组件上绑定自定事件 在子组件使用this ...

  9. React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson17 转载请注明出处,保留原文链接和作者信息. 上一个评论功能的案例中,可能会有些同学会对一个 ...

随机推荐

  1. NSSM部署.Net Core到 Windows 服务

    NSSM 官网http://www.nssm.cc/,下载地址http://www.nssm.cc/download 简单点理解就是NSSM可以把一些exe程序封装成Windows服务,然后exe程序 ...

  2. 【翻译】Tusdotnet中文文档(2)事件

    tusdotnet-----一个tus文件上传协议的实现之事件 本章接上篇来继续翻译Tusdotnet的文档,按照如下结构来翻译: 事件 OnAuthorize OnFileComplete OnBe ...

  3. DevOps 转型到底难不难(转自成哥的世界)

    原文:https://mp.weixin.qq.com/s/QwZf6ZsKGNT6YyereSmpQg DevOps 自 2009 年诞生以来,至今整整过去了十年,从最初的摸索,逐步变成一种主流的软 ...

  4. python 双层for循环,在第二层的for循环中的else中的continue,会退出到第一层for循环继续执行

    for a in [1,2,3,4,5]: for b in [1,2,3]: if a == b: print("a = b = %s" % a) break # 退出本次for ...

  5. 【转载】 C#中ArrayList使用ToArray方法转换为数组

    在C#的编程开发中,ArrayList集合是一个常用的非泛型类集合,可以使用ArrayList中的ToArray方法将ArrayList集合对象转换为数组,ToArray方法有2个重载形式,其一为vi ...

  6. 攻防世界 高手进阶区 web cat

    php cURL CURLOPT_SAFE_UPLOAD django DEBUG mode Django使用的是gbk编码,超过%F7的编码不在gbk中有意义 当 CURLOPT_SAFE_UPLO ...

  7. (转)牛牛牌型判定(五小牛 > 五花牛 > 炸弹 > 银牛 > 牛牛 > 有牛>没牛)

    牌型大小: 五小牛 > 五花牛 > 炸弹 > 银牛 > 牛牛 > 有牛(牛987654321) > 没牛,K > Q > J ……2 > A, 黑 ...

  8. 【转载】Gradle学习 第十一章:使用Gradle命令行

    转载地址:http://ask.android-studio.org/?/article/94 This chapter introduces the basics of the Gradle com ...

  9. elasticsearch查询所有数据restful api以及java代码实现

    原文:http://blog.java1234.com/blog/articles/366.html restful api实现如下: get http://192.168.1.111:9200/fi ...

  10. 使用docker搭建redis-cluster环境

    目录 基础环境信息 搭建步骤 搭建中遇到的问题 其他参考     临时接到一个测试任务,而测试需要用到redis-cluster环境,却没有现成的环境可用,于是只能自力更生搭建测试环境.一开始想采用在 ...