Mobx基础

157 阅读3分钟

这篇文章主要用于学习和上手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 使用。

状态图
接下来我们会来先了解下核心概念和写法,最后结合一个demo来理解其作用和使用。

核心概念 - Observable state(可观察的状态)

  1. 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(动作)

  1. 状态应该以某种方式来更新, 动作是一段可以改变状态的代码。

核心概念 - Derivations(衍生)

任何 源自状态并且不会再有任何进一步的相互作用的东西就是衍生。 衍生以多种形式存在:

  • 用户界面
  • 衍生数据,比如剩下的待办事项的数量。
  • 后端集成,比如把变化发送到服务器端。

MobX 区分了两种类型的衍生:

  • Computed values(计算值) - 它们是永远可以使用纯函数(pure function)从当前可观察状态中衍生出的值。
  • Reactions(反应) - Reactions 是当状态改变时需要自动发生的副作用。需要有一个桥梁来连接命令式编程(imperative programming)和响应式编程(reactive programming)。或者说得更明确一些,它们最终都需要实现I / O 操作。

黄金法则: 如果你想创建一个基于当前状态的值时,请使用 computed

Mobx原则

  1. MobX 支持单向数据流,也就是动作改变状态,而状态的改变会更新所有受影响的视图
    原则
  2. 当状态改变时,所有衍生都会进行原子级的自动更新。因此永远不可能观察到中间值。
  3. 所有衍生默认都是同步更新。这意味着例如动作可以在改变状态之后直接可以安全地检查计算值
  4. 计算值是延迟更新的。任何不在使用状态的计算值将不会更新,直到需要它进行副作用(I / O)操作时。 如果视图不再使用,那么它会自动被垃圾回收。
  5. 所有的计算值都应该是纯净的。它们不应该用来改变状态。

mobx Demo

估计上面会看的一脸懵逼,看个demo就理解了:Electron-react-mobx

有问题欢迎加群沟通哦:

群