create-react-app + mobx 之配置篇

create-react-app + mobX 配置

一、前言：

之前在学react时用的都是redux作为状态管理库，后来在和小伙伴讨论后发现，redux虽然好，但是在使用时总是感觉不够简单，然后得知有另一个比较流行的状态管理库mobX也能作为react的状态管理库，所以就抽空来学习一下这个库。

mobX可以运用在react应用中，但是并不是一定要绑定在react。此外，它是Redux作为状态管理解决方案的一个有价值的替代方案。这里我使用的是creact-react-app作为应用模板,在create-react-app上使用mobX时却发现了一些坑，所以就记录下来。

二、配置：

1、不使用 Decorators 修饰器：

在不使用 Decorators 修饰器的情况下，mobX是可以直接在create-react-app上直接运行的，无须配置。

首先创建一个项目：

create-react-app react-mobx

接着安装 mobx mobx-react：

npm install --save mobx mobx-react

mobx 状态管理库，mobx-react 用于连接 state 状态和React视图，现在你就可以使用它来创建状态容器，或者，如下所示，利用本地组件状态而不是使用React的本地状态。

extendObservable 用于创建一个可观察的值，observer 可以确保应用程序在可观察值改变时做出反应。

输入命令：

npm start

就可以在浏览器 http://localhost:3000/ 下看到效果：

点击增加/减少，数值变化 +1（-1）。

2、另一个样板：create-react-app-mobx

GitHub上有一个样板项目，create-react-app-mob，由MobX的创始人米歇尔·韦斯特莱特(Michel Weststrate)维护。它将MobX安装在一个create-react-app引导应用程序中。以下命令是命令行的安装说明:

git clone git@github.com:mobxjs/create-react-app-mobx.git
cd create-react-app-mobx
npm install
npm start

做完以上步骤，你大概可以在浏览器看到效果了

3、修饰器：Decorators

基本上，前面展示的所有内容都表明MobX完全可以在没有装饰器的情况下使用。官方的MobX文档也展示了这一点。如果有人说你必须在MobX中使用decorator，那就不是真的。您可以为它使用普通函数。那为什么使用修饰符?

使用修饰符的优点：

1. 最大限度地减少样板
2. 用作声明
3. 易于使用和阅读
4. 在使用mobx时更受欢迎

使用修饰符的缺点：

1. 没有本地Javascript可用，因此需要转换(例如通过Babel)
2. 不稳定的规范

MobX并不是唯一使用decorator的库。大多数的库都提供了一个非修饰器解决方案。然后可以使用这两种变体。在MobX中，两种备选方案如下:

在这里，通过 @observer class App 装饰一个类组件和通过observer(App)定义是一样的。

通过这种方式，可以将多个装饰器组合到一个组件上：

上面，如果没有装饰器那么就需要通过 compose 将多个装饰器组合到 App 上；如果使用了装饰器，则可以直接在class App 前直接修饰，如图中的 @inject('foo') @observer，两者对比之下，可以看出通过装饰器来修饰的方式更加简洁易懂。

那 decorators 在 create-react-app 上又是如何使用呢？

4、create-react-app上的修饰符：

目前的情况是，create-react-app 的维护者一直在阻碍 decorator 的发展，等到 Babel 在一个稳定的阶段支持它们。

“Our position is simple: we add transforms that are either stable enough (like async/await) or heavily used by Facebook (like class properties). Only that lets us be confident in suggesting them, because if something changes in the standard, we’ll write and release a codemod to migrate away from them.” (related issues 1 & 2)

也就是说要等babel推出一个稳定支持 decorator 版本时才能用得上呗。

但是如果我们现在就想在 create-react-app 中使用 decorator 呢？

在 create-react-app 中运行上面的代码时会发现，会在浏览器控制台中报错 Unexpected token :

你需要为给你的babel配置添加装饰器，但是 create-react-app 却不允许我们访问babel配置，这里只有一种方法可以去访问它：ejecting

基本上，在 create-react-app 上使用 decorators 有四个步骤：
（下面默认你已经创建了一个 create-react-app 应用）

1. 在命令行上键入npm run eject：

npm run eject

2. 安装必要的 Babel 插件:

npm install --save-dev babel-plugin-transform-decorators-legacy

3. 在 package.json 中添加以下 babel 配置：

{
  "plugins": [
    "transform-decorators-legacy"
  ],
  "presets": [
    "react-app"
  ]
}

4. 安装 mobx 和 mobx-react （如果你已经安装过请忽略）:

npm install --save mobx mobx-react

那么，现在你就可以在 create-react-app 中使用 @ 修饰符了。

5、使用 Decorators 时避免 eject：

在 github 上有一个避免 ejecting 你的应用的 create-react-app 分支custom-react-scripts，您只需按照 GitHub 上的说明来设置它。我没有把它们写在这里，因为它们将来可能会改变。

以上便是全部内容。
原文链接： https://www.robinwieruch.de/create-react-app-mobx-decorators/