mobx学习笔记(零基础)

一、了解mobx

1、mobx是什么

Simple，scalable state management 简单可扩展的状态管理

2、mobx优势

1. 开发难度低
2. 开发代码量少
3. 渲染性能好

3、mobx的核心思想

4. 状态变化引起的副作用应该被自动触发；
5. 单项数据流模式：Action -> State -> Reaction；

二、基础语法知识

1、准备工作：

需要先了解一下 webpack和babel ：https://blog.csdn.net/wuya1028/article/details/120427597

2、定义类 - class

	// 定义 Person 类
	class Person {
	    name() {
	        return 'Person';
	    }
	    say() {
	        return `I'm ${this.name()}`;
	    }
	}
	
	// Student 继承 Person
	class Student extends Person {
	    name() {
	        return 'Student';
	    }
	}
	
	document.write(new Person().say() + '<br/>');
	document.write(new Student().say());

运行结果

3、修饰器 - decorator

在声明阶段实现类和类成员注解的一种语法，本质是一个函数。

1. 需安装 babel-plugin-transform-decorators-legacy

   	npm install @babel/plugin-proposal-decorators -D
   

2. package.json 中配置

   	"babel": {
   		"plugins": [
   			["@babel/plugin-proposal-decorators",{"legacy": true}]
   		]
   	}
   

3. 语法
   3.1 类修饰器

   fn(target)
   

   3.2 类属性成员的修饰器

   	function readonly (target, key, descriptor) {
   	    // target: 实例对象、key: 成员名称、descriptor: 描述符
   	    console.log(target, key, descriptor)
   	    descriptor.writable = false;
   	    return descriptor;
   	}
   	
   	class Numberic {
   	    @readonly PI = 3.1415926;
   	}
   

   3.3 类方法修饰器

   	// 参数是否合法
   	function validateArgs (target, key, descriptor) {
   	    // target: 实例对象、key: 成员名称、descriptor: 描述符
   	    const func = descriptor.value;
   	    descriptor.value = function(...args) {
   	        for (let num of args) {
   	            if ('number' !== typeof num) {
   	                throw new Error(`"${num}" is not number`);
   	            }
   	        }
   	        return func.apply(this, args);
   	    }
   	}
   	
   	class Numberic {
   	    @validateArgs
   	    add(...nums) {
   	        return nums.reduce((p, n) => (p + n), 0)
   	    }
   	}
   	// 调用 add
   	new Numberic().add(1, 'x');
   

   

其他：redux: 是面向函数； mobx：响应式编程风格