MobX 入门

MobX 入门

Aug 9, 2021
2021
FE, React

基本概念 #

  • observable
    • 定义状态值
  • action
    • 用于修改状态值
    • 接受一个函数,返回一个签名相同的函数,提供触发时调用。
  • derivations
    • reactions - autorun()
      • 状态值发生改变后要执行的响应操作。
      • 接受一个函数
    • computed value - computed()
      • 接受一个函数,返回计算值对象。
      • 状态值发生改变时,计算值对象的值会自动更新。

MobX 中通过observable来定义可观察状态。


import { observable, autorun, computed, action } from "mobx";

// 定义状态
const store = observable({
  count: 0
});

MobX 中通过autorun来定义状态变化时要执行的响应操作,它接受一个函数。

mobx-react #

import React from "react";
import { observable } from "mobx";
import { observer } from "mobx-react";

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.store = observable({
      count: 0
    });
  }

  render() {
    return (
      <button onClick={() => this.store.count++}>
        {this.store.count}
      </button>
    )
  }
}

export default observer(Counter);

参考 #

十分钟入门 MobX & React

MobX 简明教程

上一篇:数据库的锁 下一篇:Redux 入门