mobx-简单可扩展的状态管理库

时间 2019-12-06

标签 mobx 简单可扩展状态管理繁體版

原文原文链接

mobx

mobx,做用相似于redux,相比于reduxmobx的学习成本更低，开发难度低，开发代码少，渲染性能好（状态和组件是一对一的，好比你又三个转台对应三个组件，若是组件状态发生改变以后，只会处理受影响的组件，不受影响的不作处理）javascript

核心思想

状态变化引发的反作用应该被自动触发java

action是惟一能够修改state的东西，并可能有其余反作用
State是可观察和最低响度定义的，不该包含冗余活推倒数据，能算出来的就写在Computed values里
Computed values是可使用pure function 从state中推倒出的值。mobx会自动更新它并在它不实用是将其优化掉

应用逻辑只须要修改状态数据便可,mobx回自动渲染UI，无需人工干预
数据变化只会渲染对应的组件
MobX提供机制来存储和更新应用状态供 React 使用 eact 经过提供机制把应用状态转换为可渲染组件树并对其进行渲染

概念的东西可能有点抽象，咱们先试试node

mkdir mobx-textreact

npm init -ywebpack

npm i webpack webpack-cli babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 babel-plugin-transform-decorators-legacy mobx mobx-react react -Dweb

安装完成后，打开项目npm

建立mobx-test/webpack.config.js,json

mobx-test/webpack.config.jsredux

const path = require('path');
module.exports = {
    entry: './src/index.js' ,//文件入口
    output:{
        path: path.resolve('dist'),
        filename: 'bundle.js'
    },
    //模块编译
    module:{
        rules:[
            {
                test:/\.jsx?/,
                use:{
                    loader:'babel-loder',
                    options: {
                        presets: ["env", "react", "stage-0"],
                        plugins: ["transform-decorators-legacy"]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}
复制代码

建立tsconfig.json数组

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true
    }
}
复制代码

修改package.json

"scripts": {
    "start": "webpack  --mode development -w"
  },
复制代码

而后尝试npm run start会出来mobx/dist/bundle.js, 咱们在`mobx/dist

Decorator 修饰器

Decorator是一个修饰类的函数

用来修改类的行为，修饰器本质就是编译时执行的函数，若是想添加实例属性，能够经过目标类的prototype对象操做

@testable
class Person {
}
function testable(target) {
    target.testable = true;
}
// testable(Person) 蕾丝遇将类自己传到函数里面修改
console.log(Person.testable);
复制代码

修饰属性

//target类 key类的属性 discriptor描述器
function readonly(target, key, discriptor){
    discriptor.writable = false;   
}
class Circle {
    @readonly PI = 3.14; //这是实例的属性
}
let c1 = new Circle();
console.log('Circle.prototype.PI=',Circle.prototype.PI);
c1.PI = 3.15
console.log(c1.PI);

let obj = {};
obj.name = 'zfpx';
Object.defineProperty(obj, 'age', {
    value: 9,//实际的值
    enumerable: false,//是否可枚举
    writable: false,//是否可修改
    configurable: false//是否可配置 delete obj.age;
});
console.log(obj.age);
obj.age = 10;
console.log(obj.age);

复制代码

修饰类的圆形(方法)

function logger(target, key, descriptor) {
    let oldVal = descriptor.value;//获取老函数
    descriptor.value = function () {
        console.log(`${key}(${Array.from(arguments).join(',')})`);
        return oldVal.apply(this, arguments);
    }
}
class Calculator {
    @logger
    add(a, b) {
        return a + b;
    }
}
logger(Calculator.prototype, 'add', Object.getOwnPropertyDescriptor(Calculator.prototype, 'add'));

let c1 = new Calculator();
console.log(Calculator.prototype.add);
let ret = c1.add(1, 2);// add(1,2)
console.log(ret);
复制代码

Proxy

Proxy 能够理解成，在目标对象以前架设一层“拦截”，外界对该对象的访问，都必须先经过这层拦截，所以提供了一种机制，能够对外界的访问进行过滤和改写
get方法用于拦截某个属性的读取操做，能够接受三个参数，依次为目标对象、属性名和 proxy 实例自己
set方法用来拦截某个属性的赋值操做，能够接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例自己

代替objectdefinePropty

let p1 = new Proxy({ name: 'zfpx', age: 9},{
    get: function(target, key){
        console.log(`get ${key}`);
        return Reflect.get(target,key);
    },
    set: function(target, key,value){
        console.log(`set ${key} ${value}`);
        target[key] = value;
    }
});
console.log(p1.name,p1.age);

get name
index.js:8 get age
index.js:16 zfpx 9
复制代码

mobx

MobX为现有的数据结构(如对象，数组和类实例)添加了可观察的功能。

observable就是一种让数据的变化能够被观察的方法

先把数据转化成能够被观察的对象，那么对这些数据的修改就能够备监视

let arr1 = observable([1, 2, 3]);
console.log(arr1);
//数据处理
arr1.pop();
arr1.push(4);
arr1.unshift(0);
console.log(arr1); //0124
复制代码

o1 输出一个proxy对象，可观察对象，原理就是proxy，对于基本数据类型须要装箱，在类里面的基本数据类型不须要装箱

//添加观察
let { observable, observe } = require('mobx');
let o1 = observable({ name: 'zdl' });
console.log(o1);

observe(o1, change => console.log(change));
o1.name = 'zdl2';

let num = observable.box(1);
observe(num, c => console.log(c));
console.log(num.get());
num.set(2);

let bool = observable.box(true);
console.log(bool.get());

let str = observable.box('hello');
console.log(str.get());
复制代码

使用对可观察对象作出响应

computed

计算值(computed values)是能够根据现有的状态或其它计算值衍生出的值
组合已有的可观察数据，成为新的可观察数据既是反应又是可观察数据
能够做为函数使用也能够做为decorator使用使用 .get() 来获取计算的当前值使用 .observe(callback) 来观察值的改变。
computed值能够引用其它computed的值，可是不能循环引用

let { observable, observe, computed, autorun, when, reaction, action,runInAction } = require('mobx');
class Person {
    @observable name = 'zfpx';
    @observable age = 10;
    @observable province = '广东';
    @observable city = '深圳';
    @observable area = '010';
    @observable number = '1899999999';
    @computed get home() {
        return this.province + '-' + this.city;
    }

}
let p1 = new Person();
console.log(p1.home);

//要监听变量变化能够用observe，可是计算得放到外面
let phone = computed(() => {
    return "number:" + p1.area + '-' + p1.number;
});
phone.observe(c => console.log(c));
p1.area = '202'
复制代码

autorun

若是使用修饰器模式，则不能再用observe方法了当你想建立一个响应式函数，而该函数自己永远不会有观察者时,可使用 mobx.autorun 当使用 autorun 时，所提供的函数老是当即被触发一次，而后每次它的依赖关系改变时会再次被触发数据渲染后自动渲染

上述若是将@computed修饰phone，p1.phone.observe(change=>console.log(change))会出错，由于p1.phone获得的是字符串，因此不能监听，此时咱们就须要用到autorun，当即被触发一次，而后每次它的依赖关系改变时会再次被触发。

let { observable, observe, computed, autorun, when, reaction, action,runInAction } = require('mobx');
class Person {
    @observable name = 'zfpx';
    @observable age = 10;
    @observable province = '广东';
    @observable city = '深圳';

    @observable area = '010';
    @observable number = '1899999999';
    @computed get phone() {
        return this.area + '-' + this.number;
    }
}
let p1 = new Person();
// p1.phone.observe(change=>console.log(change));
console.log(p1.phone);
//自动运行,当系统启动以后自动运行此函数
autorun(() => {
    console.log(p1.phone);
});
p1.area='020';
复制代码

when

when 观察并运行给定的 predicate，直到返回true。一旦返回 true，给定的 effect 就会被执行，而后 autorunner(自动运行程序) 会被清理。该函数返回一个清理器以提早取消自动运行程序。

let { observable, observe, computed, autorun, when, reaction, action,runInAction } = require('mobx');
class Person {
    @observable name = 'zfpx';
    @observable age = 10;
    @observable province = '广东';
    @observable city = '深圳';

    @observable area = '010';
    @observable number = '1899999999';

    @computed get home() {
        return this.province + '-' + this.city;
    }

    @computed get phone() {
        return this.area + '-' + this.number;
    }
}
let p1 = new Person();
// when会等待条件知足，一旦知足就会执行回调并销毁监听
when(() => p1.age >= 11, () => {
    console.log(p1.age);
});
setInterval(() => {
    p1.age++;
}, 1000);

// 会返回一个取消监听的函数，若是 调用它就直接取消监听
let disposer = when(() => p1.age >= 18, () => {
    console.log(p1.age);
});
disposer();
//这样就直接取消监听了，不会在console.log
setInterval(() => {
    p1.age++;
}, 1000);
复制代码

reaction

autorun的变种，autorun会自动触发，reaction对于如何追踪observable赋予了更细粒度的控制
它接收两个函数参数，第一个(数据函数)是用来追踪并返回数据做为第二个函数(效果函数)的输入
不一样于autorun的是当建立时效果函数不会直接运行，只有在数据表达式首次返回一个新值后才会运行
能够用在登陆信息存储和写缓存逻辑

// 监听数组中变量的变化 ，变化以后才执行回调函数
reaction(() => [p1.age, p1.name], arr => {
    console.log(arr);
});
p1.age = 11;
p1.name = 'zfpx8';
复制代码

action

即批量处理，所有改完在触发

...
autorun(() => {
    console.log(p1.phone);
});
p1.area='020';
p1.number='020';

//会输出两次，咱们想输出一个，须要用action函数
let { observable, observe, computed, autorun, when, reaction, action,runInAction } = require('mobx');
class Person {
    ...
    @action switchPhone(area, number) {
        this.area = area;
        this.number = number;
    }
}
let p1 = new Person();
autorun(() => {
    console.log(p1.phone);
});
//p1.area='020';
//p1.number='020';
p1.switchPhone('200', '300');

复制代码

除了action 还有action.bound

let { observable, observe, computed, autorun, when, reaction, action,runInAction } = require('mobx');
class Person {
    ...
    @action.bound switchPhone(area, number) {
        this.area = area;
        this.number = number;
    }
}
let p1 = new Person();
autorun(() => {
    console.log(p1.phone);
});
//p1.area='020';
//p1.number='020';
//p1.switchPhone('200', '300');
let s = p1.switchPhone;
s('200', '300');
//s() 的this指针不同，此时咱们就须要bounld操做
复制代码

注意点：

let num = 1;
let numObj = observable.box(num);
numObj.observe(x => console.log(x));
numObj.set(100);
num = 2;//因为num是普通类型，因此改变num对numObj没有影响
复制代码

可是若是咱们要随意组合，那咱们不可能写无数个方法，解决方法以下

runInAction

将其做为临时代码块执行，runInAction不执行完，任何都没法发现，做为action运行

runInAction(() => {
    store.province='山东';
    store.city='济南';
});
复制代码

咱们用mobx 和 mobx-react 结合模拟react-redux

安装mobx-react && react-dom src/index.js

import React, { Component } from 'react';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
import ReactDOM from 'react-dom';

class Store {
    @observable number = 0;
    @action.bound add(num) {
        this.number = this.number + num;
    }
}
@observer
class Counter extends Component {
    render() {
        let store = this.props.store;
        return (
            <div> <p>{store.number}</p> <button onClick={() => store.add(1)}>+</button> </div>
        )
    }
}
let store = new Store();
//store.add = store.add.bind(store);
ReactDOM.render(<Counter store={store} />, document.querySelector('#root')); 复制代码

import React, { Component } from 'react';
import { observable, action ,observe} from 'mobx';
import { observer } from 'mobx-react';
import ReactDOM from 'react-dom';

class Store {
    @observable todos = [];
    constructor() {
        observe(this.todos, event => {
            console.log(event);
        });
    }
}
let store = new Store();
store.todos.push({id: 1, name : 'zfpx'});
store.todos.push({id: 2, name : 'zfpx'});
console.log(store.todos.get(0).name);
store.todos.get(0).name = 'zfpx3'
console.log(store.todos.get(0).name);
复制代码

disposers

import React, { Component } from 'react';
import { observable, action ,observe} from 'mobx';
import { observer } from 'mobx-react';
import ReactDOM from 'react-dom';

class Store {
    @observable todos = []
    disposers = [];//里面存放着全部的取消监听的函数 
    //但愿监听store的变化，变化发生以后自动执行回调函数
    constructor() {
        observe(this.todos, event => {
            console.log(event);
            //让之前的全部取消监听函数执行
            this.disposers.forEach(disposer => disposer());
            this.disposers = [];
            for (let todo of event.object) {
                let disposer = observe(todo, e => {
                    console.log(e);
                });
                this.disposers.push(disposer);
            }
        });
    }
}
let store = new Store();
store.todos.push({id: 1, name : 'zfpx'});
store.todos.push({id: 2, name : 'zfpx'});
store.todos.get(0).name = 'zfpx3'
复制代码

spy

监听每个变化，可是性能不好，通常挑食的时候才用

import React, { Component } from 'react';
import { observable, action ,observe} from 'mobx';
import { observer } from 'mobx-react';
import ReactDOM from 'react-dom';
spy(event => console.log(event));
class Store {
    @observable todos = []
    disposers = [];//里面存放着全部的取消监听的函数 
}
let store = new Store();
store.todos.push({id: 1, name : 'zfpx'});
store.todos.push({id: 2, name : 'zfpx'});
store.todos.get(0).name = 'zfpx3'
复制代码

结合react实例

src/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { observable, action, computed, trace } from 'mobx';
import { observer } from 'mobx-react';

//放数据
class Todo {
    id = Math.random();
    @observable text = '';
    @observable completed = false;
    constructor(text) {
        this.text = text;
    }
    //切换完成状态 
    @action.bound toggle() {
        this.completed = !this.completed;
    }
}

class Store {
    @observable todos = [];
    @observable filter = 'all';
    @action.bound changeFilter(filter) {
        this.filter = filter; 
    } 
    @action.bound addTodo(text) {
        this.todos.push(new Todo(text));
    }
    @action.bound removeTodo(todo) {
        this.todos.remove(todo);
    }
    @computed get filteredTodos() {
        return this.todos.filter(todo => {
            switch (this.filter) {
                case 'completed':
                    return todo.completed;
                case 'uncompleted':
                    return !todo.completed;
                default:
                    return true;
            }
        });
    }
    @computed get reminder() {
        return this.todos.reduce((count, todo) => {
            count = count + (todo.completed ? 0 : 1);
            return count;
        }, 0);
    }
}
let store = new Store();
@observer
class TodoItem extends Component {
    trace();
    render() {
        return (
            <React.Fragment>
                <input type="checkbox" 
                    onChange={this.props.todo.toggle}
                    checked={this.props.todo.completed} />
                <span style={{ textDecoration: this.props.todo.completed ? 'line-through' : '' }}>{this.props.todo.text}</span>
            </React.Fragment>
        )
    }
}

@observer
class Todos extends Component {
    state = {
        text: ""
    }
    handleSubmit = (event) => {
        event.preventDefault();
        let text = this.state.text;
        this.props.store.addTodo(text);
        this.setState({ text: '' });
    }  
    handleChange = (event) => {
        this.setState({
            text: event.target.value
        });
    }
    render() {
        trace()
        let store = this.props.store;
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text"
                        onChange={this.handleChange}
                        value={this.state.text} />
                </form>
                <ul>
                    {
                        store.filteredTodos.map(todo => (
                            <li key={todo.id}>
                                <TodoItem todo={todo} />
                                <span onClick={() => store.removeTodo(todo)}>X</span>
                            </li>                         
                        ))
                    }
                </ul>
                <div>
                    <p>你还有{store.reminder}件待办事项</p>
                    <p>
                        <button
                            onClick={() => store.changeFilter('all')}
                            style={{ color: store.filter == 'all' ? 'red' : 'black' }}
                        >所有</button>
                        <button
                            onClick={() => store.changeFilter('uncompleted')}
                            style={{ color: store.filter == 'uncompleted' ? 'red' : 'black' }}
                        >未完成</button>
                        <button
                            onClick={() => store.changeFilter('completed')}
                            style={{ color: store.filter == 'completed' ? 'red' : 'black' }}
                        >已完成</button>
                    </p>
                </div>
            </div>
        )
    }
}
ReactDOM.render(<Todos store={store} />, document.querySelector('#root'));
复制代码

咱们能够看到使用mobx优雅，简洁，但这还不够，咱们用其中的trace测试性能，结果并不太好，所以咱们对述代码作出优化，

代码优化

优化原则

把视图拆解的更细致
使用专门的视图渲染列表数据
尽量晚的解构使用数据

src/index

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { observable, action, computed, trace , observe, toJS} from 'mobx';
import { observer } from 'mobx-react';

//放数据
class Todo {
    id = Math.random();
    @observable text = '';
    @observable completed = false;
    constructor(text, completed = false) {
        this.text = text;
    }
    //切换完成状态 
    @action.bound toggle() {
        this.completed = !this.completed;
    }
}

class Store {
    @observable todos = [];
    
    @observable filter = 'all';
    @action.bound changeFilter(filter) {
        this.filter = filter; 
    } 
    @action.bound addTodo(text) {
        this.todos.push(new Todo(text));
    }
    @action.bound removeTodo(todo) {
        this.todos.remove(todo);
    }
    @computed get filteredTodos() {
        return this.todos.filter(todo => {
            switch (this.filter) {
                case 'completed':
                    return todo.completed;
                case 'uncompleted':
                    return !todo.completed;
                default:
                    return true;
            }
        });
    }
    @computed get reminder() {
        return this.todos.reduce((count, todo) => {
            count = count + (todo.completed ? 0 : 1);
            return count;
        }, 0);
    }
}
let store = new Store();
@observer
class TodoItem extends Component {
    render() {
        return (
            <React.Fragment>
                <input type="checkbox" 
                    onChange={this.props.todo.toggle}
                    checked={this.props.todo.completed} />
                <span style={{ textDecoration: this.props.todo.completed ? 'line-through' : '' }}>{this.props.todo.text}</span>
            </React.Fragment>
        )
    }
}
@observer
class TodoHeader extends Component {
    state = {
        text: ""
    }
    handleChange = (event) => {
        this.setState({
            text: event.target.value
        });
    }
    handleSubmit = (event) => {
        event.preventDefault();
        let text = this.state.text;
        this.props.store.addTodo(text);
        this.setState({ text: '' });
    }  
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                    <input type="text"
                        onChange={this.handleChange}
                        value={this.state.text} />
            </form>
        )
    }
}
@observer
class TodoItems extends Component {
    render() {
        return (
            <ul>
                {
                    this.props.store.filteredTodos.map(todo => (
                        <li key={todo.id}>
                            <TodoItem todo={todo} />
                            <span onClick={() => store.removeTodo(todo)}>X</span>
                        </li>                         
                    ))
                }
            </ul>
        )
    }
}
@observer
class TodoFooter extends Component {
    render() {
        let store = this.props.store;
        return (
            <div>
                <p>你还有{store.reminder}件待办事项</p>
                <p>
                    <button
                        onClick={() => store.changeFilter('all')}
                        style={{ color: store.filter == 'all' ? 'red' : 'black' }}
                    >所有</button>
                    <button
                        onClick={() => store.changeFilter('uncompleted')}
                        style={{ color: store.filter == 'uncompleted' ? 'red' : 'black' }}
                    >未完成</button>
                    <button
                        onClick={() => store.changeFilter('completed')}
                        style={{ color: store.filter == 'completed' ? 'red' : 'black' }}
                    >已完成</button>
                </p>
            </div>
        )
    }
}

@observer
class Todos extends Component {
    render() {
        let store = this.props.store;
        return (
            <div>
                <TodoHeader store={store} />
                <TodoItems store={store} />
                <TodoFooter store={store} />
            </div>
        )
    }
}
ReactDOM.render(<Todos store={store} />, document.querySelector('#root'));
复制代码

数据持久

每次刷新保持原来状态

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { observable, action, computed, trace , observe, toJS} from 'mobx';
import { observer } from 'mobx-react';

//放数据
class Todo {
    id = Math.random();
    @observable text = '';
    @observable completed = false;
    constructor(text, completed = false) {
        this.text = text;
    }
    //切换完成状态 
    @action.bound toggle() {
        this.completed = !this.completed;
    }
}

class Store {...
    @action.bound load(todos) {
        todos.forEach(todo => {
            this.todos.push(new Todo(todo.text, todo.completed));
        });
    }
    cancelObserves = [];
    constructor() {
        observe(this.todos, (event) => {
            console.log('event', event);
            this.save();
            this.cancelObserves.forEach(d => d());
            this.cancelObserves = [];
            for (let todo of event.object) {
                this.cancelObserves.push(observe(todo, this.save));
            }
        });
    }
    @action.bound save() {
        let todos = toJS(this.todos);
        localStorage.setItem('todos', JSON.stringify(todos));
    }
    @action.bound addTodo(text) {
        window.setTimeout(() => {
            this.todos.push(new Todo(text));
        }, 1000)
    }
   ...
}
...
@observer
class Todos extends Component {
    componentDidMount() {
        let todosStr = localStorage.getItem('todos');
        let todos = todosStr ? JSON.parse(todosStr) : [];
        this.props.store.load(todos);
    }
    render() {...}
}
ReactDOM.render(<Todos store={store} />, document.querySelector('#root')); 复制代码

mobx-简单可扩展的状态管理库

mobx

核心思想

Decorator 修饰器

Decorator是一个修饰类的函数

修饰属性

修饰类的圆形(方法)

Proxy

mobx

使用对可观察对象作出响应

computed

autorun

when

reaction

action

runInAction

咱们用mobx 和 mobx-react 结合 模拟react-redux

结合react实例

代码优化

数据持久

咱们用mobx 和 mobx-react 结合模拟react-redux