持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

前言

哈喽大家好，我是Lotzinfly，一位前端小猎人。欢迎大家再次来到前端丛林，在这里你将会遇到各种各样的前端猎物，我希望可以把这些前端猎物统统拿下，嚼碎了服用，并成为自己身上的骨肉。今天是我们冒险的第十一天，今天会给大家介绍一下React中的mobx，到底mobx是一个什么东西呢？就让我们深入mobx探寻其中的奥秘。话不多说，开始我们的冒险之旅吧！

1. mobx

mobx是一个简单可扩展的状态管理库

2. mobx vs redux

mobx学习成本更低，性能更好的的状态解决方案

开发难度低
开发代码量少
渲染性能好

3. 核心思想

状态变化引起的副作用应该被自动触发

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

4. 环境准备

4.1 安装依赖模块

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 -D

4.2 webpack.config.js

const path = require('path');
module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react', 'stage-0'],
                        plugins: ['transform-decorators-legacy']
                    }
                }
            }
        ]
    },
    devtool: 'inline-source-map'
}

4.3 package.json

"scripts": {
"start": "webpack -w"
},

5. Decorator

5.1 类的修饰

修饰器（Decorator）函数，用来修改类的行为
修饰器是一个对类进行处理的函数。修饰器函数的第一个参数，就是所要修饰的目标类
修饰器本质就是编译时执行的函数
如果想添加实例属性，可以通过目标类的prototype对象操作

@testable
class Person {
}
//修改了Person的类的行为，增加了静态属性isTestable
function testable(target) {
    target.isTestable = true;
}
console.log(Person.isTestable)
@decorator
class A { }
---------------
    class A { }
A = decorator(A);

5.2 修饰属性

class Circle {
    @readonly PI = 3.14;
}
//descriptor {value:func,enumerable:false,configurable:true,writable:true}
function readonly(target, name, descriptor) {
    console.log(descriptor);
    descriptor.writable = false;
}
let c1 = new Circle();
c1.PI = 3.15;
console.log(c1.PI);

5.3 修饰方法

修饰器不仅可以修饰类，还可以修饰类的属性。

class Calculator {
    //@logger
    add(a, b) {
        return a + b;
    }
}
function logger(target, name, descriptor) {
    let oldValue = descriptor.value;
    descriptor.value = function () {
        console.log(`${name}(${Array.prototype.join.call(arguments, ',')})`);
        return oldValue.apply(this, arguments);
    }
}
let oldDescriptor = Object.getOwnPropertyDescriptor(Calculator.prototype, 'add');
logger(Calculator.prototype, 'add', oldDescriptor);
Object.defineProperty(Calculator.prototype, 'add', oldDescriptor);
let calculator = new Calculator();
let ret = calculator.add(1, 2);
console.log(ret);

6. Proxy

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

var proxy = new Proxy(target, handler);

let p1 = new Proxy({ name: '小明' }, {
    get: function (target, key, receiver) {
        console.log(`getting ${key}`);
        console.log(receiver);
        return Reflect.get(target, key, receiver);
    },
    set: function (target, key, value, receiver) {
        console.log(`setting ${key}`);
        return Reflect.set(target, key, value, receiver);
    }
});
console.log(p1.name);

结尾

好啦，这期的前端丛林大冒险先到这里啦！这期我们初步了解了mobx以及如何安装，大家一定要好好啃下来嚼烂嚼透。希望大家可以好好品尝并消化，迅速升级，接下来我们才更好地过五关斩六将！好啦，我们下期再见。拜拜！

【前端丛林】React这样服用，效果更佳（11）

前言