快速了解mobx+react(更新中)

@GuoYongfeng 2016-11-20 09:52:30发表于 iuap-design/blog

快速了解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>

核心概念

enter image description here

mobx 的几个关键组成

  1. state

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

  2. action

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

  3. Derivations

    state派生出来的东西.包括

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

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

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

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

  1. @observable

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

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

    派生出来的属性。

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

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

  1. 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的结合

(未完待续)