这篇文章主要用于学习和上手mobx, 主要有以下内容:
- mobx简介
- mobx核心概念
- mobx Demo: Electron-react-mobx
Mobx中文文档: suprise.gitbooks.io/mobx-cn/con… Mobx官网: cn.mobx.js.org/ Mobx概念: cn.mobx.js.org/intro/conce…
mobx简介
mobx通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:
任何源自应用状态的东西都应该自动地获得。
React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。
核心概念 - Observable state(可观察的状态)
- MobX 为现有的数据结构(如对象,数组和类实例)添加了可观察的功能,有2种方式: (1)注解方式
import { observable } from "mobx";
class Todo {
id = Math.random();
@observable title = "";
@observable finished = false;
}
(2)非注解方式
javascript import { decorate, observable } from "mobx"; class Todo { id = Math.random(); title = ""; finished = false; } decorate(Todo, { title: observable, finished: observable })
核心概念 - Computed values(计算值)
作用: 当相关数据变化后,与其相关的数据值如果使用了@computed
则会自动更新。
class TodoList {
@observable todos = [];
@computed get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.finished).length;
}
}
当todos
数组变化后,unfinishedTodoCount
得到的结果也会自动变化。只有在需要他们的时候,他们才会自动更新。
核心概念 - Reactions(反应)
Reactions 和计算值很像,但它不是产生一个新的值,而是会产生一些副作用,reactions 在 响应式编程和命令式编程之间建立沟通的桥梁。 使用autorun、reaction 和 when 函数即可简单的创建自定义 reactions,以满足你的具体场景。 简而言之:状态改变后,触发一些你想触发的动作,比如打印日志等,就叫做Reactions(反应)
核心概念 - Actions(动作)
- 状态应该以某种方式来更新, 动作是一段可以改变状态的代码。
核心概念 - Derivations(衍生)
任何 源自状态并且不会再有任何进一步的相互作用的东西就是衍生。 衍生以多种形式存在:
- 用户界面
- 衍生数据,比如剩下的待办事项的数量。
- 后端集成,比如把变化发送到服务器端。
MobX 区分了两种类型的衍生:
- Computed values(计算值) - 它们是永远可以使用纯函数(pure function)从当前可观察状态中衍生出的值。
- Reactions(反应) - Reactions 是当状态改变时需要自动发生的副作用。需要有一个桥梁来连接命令式编程(imperative programming)和响应式编程(reactive programming)。或者说得更明确一些,它们最终都需要实现I / O 操作。
黄金法则: 如果你想创建一个基于当前状态的值时,请使用 computed
Mobx原则
- MobX 支持单向数据流,也就是
动作
改变状态
,而状态
的改变会更新所有受影响的视图
。 - 当状态改变时,所有衍生都会进行原子级的自动更新。因此永远不可能观察到中间值。
- 所有
衍生
默认都是同步更新
。这意味着例如动作可以在改变状态之后直接可以安全地检查计算值
。 计算值
是延迟更新的。任何不在使用状态的计算值将不会更新
,直到需要它进行副作用(I / O)操作时。 如果视图不再使用,那么它会自动被垃圾回收。- 所有的计算值都应该是纯净的。它们不应该用来改变状态。
mobx Demo
估计上面会看的一脸懵逼,看个demo就理解了:Electron-react-mobx
有问题欢迎加群沟通哦: