Mobx 十分钟快速入门

Store, Redux 和 Mobx

  • 前端数据流方案包括了 flux, redux 和 mobx. 在其中数据存储的地方, 就叫做 store.

  • Redux:

    • 参考这里
  • Mobx

    • Mobx 是 flux 实现的后起之秀. 以更简单的时候和更少的概念, 让 flux 使用起来变得更简单.
    • 相比 Redux 有mutation, action, dispatch 等概念. mobx则更加简洁, 更符合对store 增删改查的操作概念.

Mobx 快速入门

通过下述的代码, 我们可以完成一个 react-mobx 实现的计数器. 点击这里查看实际效果.

安装依赖项: mobx, mobx-react

npm i mobx mobx-react

定义observable, observer 和 action

  • 定义一个状态对象, 它具有可观察的属性, 我们将它称为 observable
    • 首先我们需要定义一个状态对象
    • 将其转化为可观察状态
      • 将状态对象传递给 mobx observable()
import {observable} from 'mobx';

let appState = observable({
    timer: 0
});
  • 创建一个react组件, 它能够响应 observable 的变化, 我们将它称为 observer
    • 创建一个 React 组件.
    • 将其转化为 响应 observable 的组件
      • 使用 mobx-react observer() 来包裹它.
let App = observer(({ appState }) => {
    return (
        

Time passed: {appState.timer}

); });
  • 定义更改状态的函数, 我们将它称为 action
    • 创建一个函数来更改 observable.
    • 使用 mobx action来包裹它.
setInterval(action(()=>{
  appState.timer +=1  
}), 1000) 

完整代码

import React from "react";
import ReactDOM from "react-dom";
import { observable, action } from "mobx";
import { observer } from "mobx-react";

// create State object
let appState = observable({ timer: 0 });

// define action
setInterval(
    action(() => {
        appState.timer += 1;
    }),
    1000
);

appState.resetTimer = action(() => {
    appState.timer = 0;
});

// create observer
let App = observer(({ appState }) => {
    return (
        

Time passed : {appState.timer}

); }); const root = document.getElementById("root"); ReactDOM.render(, root);

参考

https://mobx.js.org/intro/overview.html

你可能感兴趣的:(Mobx 十分钟快速入门)