mobx + react

前言

React是一个状态机，由开始的初始状态，经过与用户的互动，致使状态变化，从而从新渲染UI。

对于小型应用，引入状态管理库是"奢侈的"。

但对于复杂的中大型应用，引入状态管理库是"必要的"。

如今热门的状态管理解决方案Redux，MobX相继进入开发者的视野

介绍

1.入门

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

2.安装

npm install --save mobx mobx-react

3.核心概念

1.state(状态) ：状态是驱动应用的数据。

2.observable(value) && @observable

Observable 值能够是JS基本数据类型、引用类型、普通对象、类实例、数组和映射。其修饰的state会暴露出来供观察者使用。

const map = observable.map({ key: "value"});
    map.set("key", "new value");
    
    const list = observable([1, 2, 4]);
    list[2] = 3;
    
    const person = observable({
        firstName: "Clive Staples",
        lastName: "Lewis"
    });
    person.firstName = "C.S.";
    
    const temperature = observable(20);
    temperature.set(25);
复制代码

3.observer(观察者)

被observer修饰的组件，将会根据组件内使用到的被observable修饰的state的变化而自动从新渲染

import {observer} from "mobx-react";
    
    var timerData = observable({
        secondsPassed: 0
    });
    
    setInterval(() => {
        timerData.secondsPassed++;
    }, 1000);
    
    @observer class Timer extends React.Component {
        render() {
            return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
        }
    };
    
    React.render(<Timer timerData={timerData} />, document.body);
复制代码

4.action(动做)

只有在 actions 中，才能够修改 Mobx 中 state 的值。

注意：当你使用装饰器模式时，@action 中的 this 没有绑定在当前这个实例上，要用过 @action.bound 来绑定 使得 this 绑定在实例对象上。

[@action](/user/action).bound setName () {
      this.myName = 'HUnter'
    }
复制代码

actions ------> state ------> view

5.computed

计算值(computed values)是能够根据现有的状态或其它计算值衍生出的值。

getter：得到计算获得的新state并返回。

setter： 不能用来直接改变计算属性的值，可是它们能够用来做“逆向”衍生。

class Foo {
        [@observable](/user/observable) length = 2;
        @computed get squared() {
            return this.length * this.length;
        }
        set squared(value) { // 这是一个自动的动做，不须要注解
            this.length = Math.sqrt(value);
        }
    }
复制代码

6.autorun

这一般是当你须要从反应式代码桥接到命令式代码的状况，例如打印日志、持久化或者更新UI的代码。

var numbers = observable([1,2,3]);
    var sum = computed(() => numbers.reduce((a, b) => a + b, 0));
    
    var disposer = autorun(() => console.log(sum.get()));
    // 输出 '6'
    numbers.push(4);
    // 输出 '10'
    
    disposer();
    numbers.push(5);
    // 不会再输出任何值。`sum` 不会再从新计算。
复制代码

经验法则：若是你有一个函数应该自动运行，但不会产生一个新的值，请使用autorun。

其他状况都应该使用 computed。

4.demo

技术栈：react + react-router+mobx+webpack

github网址：github.com/zhaoyu69/mo…

备注：新手进来以后

git clone git@github.com:zhaoyu69/mobx-demo.git
   npm install
   npm run server
   npm start
复制代码

5.效果图