Mobx-basic(快速上手)莞式教程

Mobx-basic(快速上手)莞式教程

之前写过一篇redux的教程 可以参考redux的教程

本篇讲通过通俗易懂的方式让你快速上手mobx 的基本使用，虽然已经可以满足大部分开发中的需求但是详细 请参考中文官方文档

本篇配教程代码 https://github.com/Chad97/mobx-basic

如果对想要快速入门的你有所帮助请给点个小小的start吧~

概述

1. 本篇采用的是mobx5 和react 16.8, 均才用最新版本库所做示范在有的API和其他版本可能有所差异，如严格模式
2. 本篇纯属原创 转载请注明出处

我们先来简单的看下官网的介绍

MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:

其实你可以简单的理解成 mobx是一个excel的计算表格

你将要了解到：

observable, autorun, computed, action, configure —— mobx
observer —— mobx-react

准备工作

因为本篇通篇使用ES7中的修饰器语法@，所以需要配置bable，推荐使用
当然你也可以使用 decorators 为参考

1. 安装 yarn add mobx mobx-react

2. 启用修饰器 babel 支持ES7中的修饰器语法@

   • yarn eject 打开配置
   • 安装babel 依赖
     yarn add babel-plugin-transform-decorators-legacy --dev
yarn add @babel/plugin-proposal-decorators

3. 配置webpack

"babel": {
   
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
   
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
   
          "loose": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  }

start

---

实例化对象容器

在全局文件下创建一个state.js ps 别问我为啥不叫store 因为我喜欢
如下