Mobx基础

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

接下来咱们会来先了解下核心概念和写法，最后结合一个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

有问题欢迎加群沟通哦：