目录

1.Mobx介绍

1.1 mobx要点

• 定义状态并使其可观察：通过mobx中observable打上标记，即可做到
• 创建视图用以相应状态变化：通过mobx-react中observer装饰组件，使组件做到响应式
• 更改状态：通过mobx中action包装函数，在函数中修改定义的值

1.2 概念与原则

• 状态：是驱动应用的数据，就像是有数据的excel表格。

• 衍生：

  • 源自状态的东西就是衍生，以一下几种形式存在

    • 用户界面
    • 衍生数据
    • 后端集成

  • mobx区分了两种类型衍生

    • computed计算值（自动响应变化的值）
    • reactions反应：状态改变时自身的副作用（自动响应变化的副作用）

• actions动作：任何一段可以改变状态的代码

2.常用API

1. observable
2. computed：函数中涉及到的变量一旦变化就会生成新的值。如果没有地方使用此值，那么他会停止更新，可通过keepAlive参数保持更新
3. action：用于装饰修改状态的函数
4. observer：mobx-react提供，将react组件变为响应式，本质上是对数据变化的反应
5. autorun：和computed很类似，一旦函数中用到的数据变化，会自动执行autorun中函数，最开始会执行一遍
6. reaction：和autorun类似，但是一开始不会执行一遍。接受两个函数，第一个函数就是依赖项，作为第二个函数的入参。能更细粒度监听数据。
7. Provider： mobx-react提供，将store传递给所有子组件
8. inject：mobx-react提供，将store注入到子组件中，子组件在props中接收
9. toJS：observable 数据结构转换成普通的 javascript 对象并忽略计算值

3.mobx会对什么作出反应

MobX 会对在追踪函数执行过程中读取现存的可观察属性做出反应

• “读取” 是对象属性的间接引用，可以用过 . (例如 user.name) 或者 [] (例如 user['name']) 的形式完成。
• “追踪函数” 是 computed 表达式、observer 组件的 render() 方法和 when、reaction 和 autorun 的第一个入参函数。
• “过程(during)” 意味着只追踪那些在函数执行时被读取的 observable 。这些值是否由追踪函数直接或间接使用并不重要。

不会作出反应的情况：

message 被改变了，但它不是 observable，它只是一个引用 observable 的变量，但是变量(引用)本身并不是可观察的。

message = observable({ title: "Foo" })
autorun(() => {
    console.log(message.title)
})
message = observable({ title: "Bar" })

title只是一个字符串，并非observable

var title = message.title;
autorun(() => {
    console.log(title)
})
message.title = "Bar"

author追踪的是message.author对应的引用，引用中的数据变化的才会引起变化

const author = message.author;
autorun(() => {
    console.log(author.name)
})
message.author = { name: "John" };

异步访问：autorun 执行期间没有访问到任何 observable，而只在 setTimeout 执行期间访问了。

autorun(() => {
    setTimeout(
        () => console.log(message.title),
        10
    )
})
message.likes.push("Jennifer");

4.mobx redux异同

共同点

• 两者都是为了解决状态不好管理，无法有效同步的问题而产生的工具。
• 都是用来统一管理应用状态的工具
• 某一个状态只有一个可靠的数据来源
• 操作更新的方式是统一的，并且是可控的
• 都支持store与react组件，如react-redux,mobx-react;

不同点

• redux将数据保存在单一的store中，而mobx将数据保存在分散的多个store中
• redux使用plain object保存数据，需要手动处理变化后的操作，mobx使用observable保存数据，数据变化后自动处理响应的操作。
• redux使用的是不可变状态，意味着状态只是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数；mobx中的状态是可变的，可以直接对其进行修改。
• mobx相对来说比较简单，在其中有很多的抽象，mobx使用的更多的是面向对象的思维，redux会比较复杂，因为其中的函数式编程思想掌握起来不是那么容易，同时需要借助一系列的中间件来处理异步和副作用。
• mobx中有更多的抽象和封装，所以调试起来会更加复杂，同时结果也更难以预测，而redux提供可以进行时间回溯的开发工具，同时其纯函数以及更少的抽象，让调试变得更加容易。
• mobx可以利用自带的computed函数生成缓存数据，redux不行，需要通过插件（如reselect）实现比较繁琐
• redux-thunk的作用是支持派发异步action，通过注入中间件实现