mobx学习

Mobx：https://cn.mobx.js.org/intro/concepts.html
MST文档：https://mobx-state-tree.js.org/intro/philosophy
MST介绍参考文章：https://juejin.im/post/6844903772972384263
Cerebral：https://cerebraljs.com/docs/views/angularjs.html

Mobx适合中小型项目
1、js语法编写
2、es6的装饰器写法

babel插件：
[“ @babel/plugin-proposal-decorators”,{“legacy”:true }}
[“@babel/plugin-proposal-class-properties”,{“loose”:true}}
Eslint配置
“parserOptions”:{“ecmafeatures”: {“legacyDecorators”:true}}

新建store,index.js
@observer定义变量
Mobx-react 链接mobx和react，提供了非常好用的api ——Provider

需要的react模块，例如

如何使用provider中的store呢？
答：在中，先引入两个api， import { inject,observer} from ‘mobx-react’
注入store，@inject {‘store’} . @observer会检测store，如果store中有更新，相应的地方会自动更新。
Store会存放在this.props中

如何进行操作？
答： action，改变observe检测的数据 @action xxx(todo){}}
Computed检测变量
@computed get xxx(){}

在MST中，一个数据组件被称为model，一个Model可以看作是一个节点（Node）,节点之间相互结合，就构造出了整颗状态树
MST提供的一个重要对象就是types，在这个对象中，包含了基础的元类型（primitives types），如string、boolean、number，还包含了一些复杂类型的工厂方法和工具方法，常用的有model、array、map、optional等。model是一个types中最重要的一个type，使用types.model方法得到的就是Model，在Model中，可以包含多个type或者其他Model。

types.model方法的第一个参数为Model设定了名称，第二个参数传入了一个对象，这个对象就是Model的props。
注意，可以省略types.model的第二个参数，然后使用model.props方法来定义props。

类型：
types.string
定义一个字符串类型字段。

types.number
定义一个数值类型字段。

types.boolean
定义一个布尔类型字段。

types.integer
定义一个整数类型字段。

types.Date
定义一个日期类型字段。

这个类型存储的值是标准的Date对象。在设置值时，可以选择传入数值类型的时间戳或者Date对象。
types.model
定义一个对象类型的字段。
types.array
定义一个数组类型的字段。
types.array(types.string);
上面的代码定义了一个字符串数组的类型。

可空类型，types.maybeNull
与types.maybe类似，将undefined替换成了null

定义类class
两个特效：继承，多态
什么是decorator?
Decorator是在声明阶段实现类与类成员注解的一种语法
npm i webpack webpack-cli babel-core babel-preset-env babel-loader –D
npm i babel-plugin-transform-class-properties –D
plugins:[‘transform-class-propertites’]
npm i babel-plugin-transform-decorators-legacy

mobx常用api
observable是一种让数据的变化可以被观察的api，只能对已有的 属性进行监视，新增的需要调用extendObservable
安装依赖 npm I mobx –S
对象，数组，es6 直接包裹
Boolean,string,number 使用observable.box()
Get获取值，set设置新的值
装饰器的用法
@observable xxx
观察数据的改变方式
Computed computed的值可以作为新的可观测的值
Autorun 自动追踪，在数据发生变化时重新触发
When() 第一个参数根据可观测参数返回布尔值，第一个参数返回为真，第二个参数立马执行
Reaction
Action减少触发autorun和reaction的次数
@action
@action.bound
runInAction(string, function)

mobx-react
npm I react react-dom prop-types mobx-react –S
npm I babel-preset-react –D ，webpack.config.js声明‘react’

Cerebral
import {set, splice, push, debounce, when} from “cerebral/operators”;
import {props, state} from “cerebral/tags”;
cerebral/operators允许您设置、复制、取消设置或检查多个数据源和目标的值。为了简化处理这些值的机制，cerebral/operators使用urls。
Debounce
debounce(time, continueChain, { terminateChain = [], immediate = true, throttle = true })
debounce can be used to limit the number a times an actionChain is called, for example on keyboard activity.
By default the first signal call will execute the continueChain immediately and the last call during the time will execute at the end. To change this to only execute the most recent continueChain at the end, set the options to { immediate: false }.
It is also possible to pass a terminateChain to the options which will be called whenever a signal is terminated.
Set
set(path, value)
when
when可以用于检查输入或状态的特定值，真，假，然后在条件匹配时运行对应的操作action.
import { parallel } from “cerebral”

parallel：可以同时触发多个异步动作，类似于promise.all，它不会等待一个promise返回，只会继续进行下一个动作。
可以将parallel合成任何已有的序列：
import { parallel } from ‘cerebral/factories’
import * as actions from ‘./actions’

export const mySequence = [
actions.someAction,
parallel(‘my parallel’, [
actions.someAsyncAction,
actions.someOtherAsyncAction
])
]
您可以通过在序列中定义路径来分散执行。
State:
// Merge the keys and their values into existing object. Handled as a
// change on all paths merged in
store.merge(‘some.path’, {
some: ‘value’
})
// Removes last item in array
store.pop(‘some.path’)
// Pushes a value to the end of the array
store.push(‘some.path’, ‘someValue’)
// Set or replace a value
store.set(‘some.path’, ‘someValue’)
// Removes first item in array
store.shift(‘some.path’)
// Splices arrays
store.splice(‘some.path’, 2, 1)
// Toggle a boolean value
store.toggle(‘some.path’)
// Unset a key and its value
store.unset(‘some.path’)
// Puts the value at the beginning of the array
store.unshift(‘some.path’, ‘someValue’)

// To change state of a module, use the moduleState tag
store.set(moduleStatefoo, ‘bar’)

Provider:
You also have access to the context inside your provider. This will allow you to leverage existing providers. The context is exposed as this.context. This keeps the API concise and under the hood we can do prototypal optimizations.
export default {
triggerSignalOnNativeEvent(event, sequence) {
window.addEventListener(event, () => {
this.context.get(sequence)()
})
}
}