快速了解mobx+react（更新中）

Question

快速了解mobx+react（更新中）

GuoYongfeng opened this issue 8 years ago · comments

郭永峰 commented 8 years ago

快速了解mobx+react

unhappy with redux? try mobx.

这是redux作者Dan Abramov主动为自己的成名作推荐的可选库

大家都比较熟悉redux，但是真正使用或是熟练使用redux的同学特别少，而且，当你的应用的规模和复杂度还没到那个级别的时候，其实真的没有必要去使用redux，那样反而让你和你的团队陷入那种为了使用而使用的尴尬处境。

什么时候适合去使用redux呢，除非你和你的团队是比较熟悉函数式编程方式的，以及你和你的团队要习惯redux的规范，这两点也是vue常常抨击的。搞技术的人，有的时候真的是很偏执，知乎上可见热闹场面。

如果你对函数式编程不是那么习惯，如果你熟悉面向对象编程，如果你熟悉之前的前端MVVM框架写法，那么，我们一起拥抱mobx吧，而mobx又是什么呢？

介绍

MobX 是社区产出的一个简单、可伸缩的状态管理解决方案，是一个可以单独使用的前端库，但大家一般都会将它和react结合在一起使用，所以接下来我们将一起了解一下如何使用mobx + react。

快速上手示例

如果你熟悉MVVM**，下面这个例子应该很好理解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="react-log"></div>

  <script src="https://cdn.jsdelivr.net/g/react@15.4.0-rc.3(react.min.js+react-dom.min.js),lodash@4.16.4"></script>
  <script src="https://unpkg.com/mobx@2.6.0/lib/mobx.umd.min.js"></script>
  <script src="https://unpkg.com/mobx-react@3.5.8/index.js"></script>
  <script src="https://rawgit.com/mattruby/mobx-examples/master/logging-utils.js"></script>
  <script>
  	wrapConsole();
  </script>
  <script>
    // 定义模型
    var data = {
      firstName: 'guo',
      lastName: 'yongfeng',
      age: 10,
      get fullName () {
        console.count('fullName');
        return this.firstName + ' ' + this.lastName;
      }
    }

    // 绑定观察
    var person = mobx.observable( data );

    // autorun 方法用于自动监听执行
    mobx.autorun(function () {
      console.log('autorun: ' + person.fullName + ' ' + person.age);
    });

    // 修改person的firstName字段
    // autorun 中的方法监听到person的相关字段变更后会自动执行
    person.firstName = 'iuap';
    person.firstName = 'design';
  </script>


</body>
</html>

核心概念

mobx 的几个关键组成

state

大致算是react的state的拓展：state驱动着你的应用，通常是特定的领域对象。比如todo任务的列表，或者ui相关的状态，比如选中的元素，loading状态等。这些state是被观察的本源，其他的东西，都是从这些state派生出来的。
action

一段改变state的代码。这个实在没啥好解释的。
Derivations

从state派生出来的东西.包括

a)派生的属性，比如尚未完成的todo任务列表，使用 todo 列表派生。这些派生属性，也可以作为其他属性的依赖，这样一直派生下去。

b)带有副作用的反应（reactions），比如todo列表变动后，在console里输入些东西，ui上的变动。

如果Derivations所依赖的state一改变，Derivations也要相应的改变或者触发一些副作用。

相对应，mobx提供了几个重要的decorator和重要方法.（api当然不止这些，核心是这几个，还有很多优化类，补强功能类，和规范代码类的api）

@observable

在你的state（通常是类的实例属性）前，加上这个就可以了，这个字段会成为被观察的本源。比如

@observable price = 0;
@observable amount = 1;

@computed

派生出来的属性。

@computed get total(){
    return this.price * this.amount;
}

如果price或amount任意一个发生改变，total也会相应改变。

autorun

派生副作用

autorun(()=>{console.log(total.get())})

这个匿名函数，依赖于total产生io的副作用。只要total变化，就会打印total的值。这里实际上形成了一个派生链，（price,amount）=> total => console.log(total.get())

对于ui来说，ui = f(state,props),把f看成是render函数，那么

		autorun(()=>{render(state,props)}

即可以更新view。 autorun里函数的执行，也是根据state的变化，自动触发的。

根据这几个基本组成，是否能大致想象自动更新view的流程？

mobx-react

mobx和react的结合

（未完待续）