MobX入门介绍

我参考的文章是官方的入门文章,声称只要10分钟就可以看完,我不会告诉你我看了多半天,英语真是硬伤。

大致介绍一些mobx,是一套简单的,可扩展的,经过历史车轮碾压过的状态管理解决方案。 他是可以独立使用的库,但是很多人都是配合react来使用的,说白了就是替代redux的一套解决方案,前提是,部分场景下,redux在全家桶中的地位还是不可撼动的。

核心观点

官方介绍说,状态管理是每个应用的核心,如果你想快速打造一个程序的车祸现场,你可以去生成不一致的状态,或者与让状态本地的变量不同步。 言外之意,我的库,可以保证决定不会产出不一致的状态!

怎么做的呢?从根源抓住问题,让所有应用的东西都自动的被状态驱动

下面看看代码,概念看多了就迷糊了。先看一下官方给出的没有引入 mobx的程序

class TodoStore {
    todos = [];

    get completedTodosCount() {
        return this.todos.filter(
            todo => todo.completed === true
        ).length;
    }

    report() {
        if (this.todos.length === 0)
            return "<none>";
        return `Next todo: "${this.todos[0].task}". ` +
            `Progress: ${this.completedTodosCount}/${this.todos.length}`;
    }

    addTodo(task) {
        this.todos.push({
            task: task,
            completed: false,
            assignee: null
        });
    }
}

const todoStore = new TodoStore();

看到这段代码,他抽离出来了一套逻辑,没有引入具体对象,核心状态是报告一下todolist的情况,有就显示,没有就不显示。
添加任务,获取完成任务的数量,以及未完成任务展示任务。

然后呢,分配一个对象作为实例完成todos的功能,

todoStore.addTodo("read MobX tutorial");
console.log(todoStore.report());

todoStore.addTodo("try MobX");
console.log(todoStore.report());

todoStore.todos[0].completed = true;
console.log(todoStore.report());

todoStore.todos[1].task = "try MobX in own project";
console.log(todoStore.report());

todoStore.todos[0].task = "grok MobX tutorial";
console.log(todoStore.report());

打印的结果大概是这个样子的。例子和mobx的理念一致,依赖追踪是动态生成的。

Next todo: "read MobX tutorial". Progress: 0/1
Next todo: "read MobX tutorial". Progress: 0/2
Next todo: "read MobX tutorial". Progress: 1/2
Next todo: "read MobX tutorial". Progress: 1/2
Next todo: "grok MobX tutorial". Progress: 1/2

mobx做到的事情就是帮你调用report这个函数,自动执行依赖于状态的代码,官方给出的例子是,就像电子表格中你改变一个数据,然后某一个数据(比如总量)也会随之发生改变。

mobx生成依赖两个装饰器,@computed@observable配合使用。简单点说,observable让变量可跟踪,computed,当observable变量变化就会调用一下去计算是否需要更新ui。

实现起来大概是这个样子的。

class ObservableTodoStore {
    @observable todos = [];   顾名思义,让这个属性变得可以观察,通常是有什么改动可以立即得知
    @observable pendingRequests = 0;

    constructor() {
        mobx.autorun(() => console.log(this.report));
    }

    @computed get completedTodosCount() {    自动计算,标识这些可以被状态派生出来
        return this.todos.filter(
            todo => todo.completed === true
        ).length;
    }

    @computed get report() {
        if (this.todos.length === 0)
            return "<none>";
        return `Next todo: "${this.todos[0].task}". ` +
            `Progress: ${this.completedTodosCount}/${this.todos.length}`;
    }

    addTodo(task) {
        this.todos.push({
            task: task,
            completed: false,
            assignee: null
        });
    }
}


const observableTodoStore = new ObservableTodoStore();

使用下列代码调用:

observableTodoStore.addTodo("read MobX tutorial");
observableTodoStore.addTodo("try MobX");
observableTodoStore.todos[0].completed = true;
observableTodoStore.todos[1].task = "try MobX in own project";
observableTodoStore.todos[0].task = "grok MobX tutorial";

Next todo: "read MobX tutorial". Progress: 0/1    打印结果。
Next todo: "read MobX tutorial". Progress: 0/2
Next todo: "read MobX tutorial". Progress: 1/2
Next todo: "grok MobX tutorial". Progress: 1/2

为什么只打印了四行呢?也就是说,第四个语句并没有触发console.log事件,原因就是(大概可以这么理解),经过计算之后发现打印的内容和刚才是一致的,所以就没有必要执行这个函数了。

@observer

React组件没有做到开箱即用,mobx提供了一个装饰器,包裹了组件,让render方法自动调用,保证你的组件和状态的同步。使用了mobx之后,就不需要再调用setState了,组件会变得 “智能”。

这样,每次改变mobx生成的store对象数据,页面就会随之改变。

这里说明一下官方网站的代码可以编辑然后运行看效果,我粘贴在这里仅供参考用。

@observer     监测数据发生变动,调用render方法。
class TodoList extends React.Component {
  render() {
    const store = this.props.store;   外层组件传入,mobx对象。
    return (
      <div>
        { store.report }    展示任务完成情况统计
        <ul>  
        { store.todos.map(
          (todo, idx) => <TodoView todo={ todo } key={ idx } />   逐一展示每条todo
        ) }
        </ul>
        { store.pendingRequests > 0 ? <marquee>Loading...</marquee> : null } 异步加载
        <button onClick={ this.onNewTodo }>New Todo</button>  //新增方法
        <small> (double-click a todo to edit)</small>
        <RenderCounter />   计数圆点
      </div>
    );
  }

  onNewTodo = () => {
    this.props.store.addTodo(prompt('Enter a new todo:','coffee plz'));
  }
}

@observer
class TodoView extends React.Component {
  render() {
    const todo = this.props.todo;
    return (
      <li onDoubleClick={ this.onRename }>
        <input
          type='checkbox'
          checked={ todo.completed }
          onChange={ this.onToggleCompleted }
        />
        { todo.task }  展示task
        { todo.assignee
          ? <small>{ todo.assignee.name }</small>    //如果todo新增内容有assignee就可以显示分配的任务给谁
          : null
        }
        <RenderCounter />
      </li>
    );
  }

  onToggleCompleted = () => {
    const todo = this.props.todo;
    todo.completed = !todo.completed;  变更完成情况
  }

  onRename = () => {
    const todo = this.props.todo;
    todo.task = prompt('Task name', todo.task) || todo.task;
  }
}

ReactDOM.render(
  <TodoList store={ observableTodoStore } />,
  document.getElementById('reactjs-app')
);

这里写图片描述
这代码看上去就很清晰了,使用这三个不同的修饰符完成不同的任务,数据渲染也不用你操心了。

修改一下分配的角色:

var peopleStore = mobx.observable([
    { name: "Michel" },
    { name: "Me" }
]);
observableTodoStore.todos[0].assignee = peopleStore[0];
observableTodoStore.todos[1].assignee = peopleStore[1];
peopleStore[0].name = "Michel Weststrate";

这个操作,是创建了一个新的mobx的store,当你想更新分配人的时候,大可直接去变动peopleStore,mobx会把你的变动带入到observableTodoStore中的。只要对象是observable的,他就可以跟踪。

这里写图片描述

异步更新数据也是手到擒来,看到上面代码了解到还有个<marquee>标签,就可以模拟进行异步加载了,代码如下:

observableTodoStore.pendingRequests++;   //开始loading
setTimeout(function() {
    observableTodoStore.addTodo('Random Todo ' + Math.random());
    observableTodoStore.pendingRequests--;   //结束laoding
}, 2000);

这就是mobx入门介绍了,有问题留言哦。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值