使用create-react-app创建react项目遇到的坑

发布者: xiaozhimn

一、前言:

之前在学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的本地状态。

1

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

npm start

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,那就不是真的。您可以为它使用普通函数。那为什么使用修饰符?

使用修饰符的优点:

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

使用修饰符的缺点:

没有本地Javascript可用,因此需要转换(例如通过Babel)
不稳定的规范
MobX并不是唯一使用decorator的库。大多数的库都提供了一个非修饰器解决方案。然后可以使用这两种变体。在MobX中,两种备选方案如下:

2

在这里,通过 @observer class App 装饰一个类组件和通过observer(App)定义是一样的。
通过这种方式,可以将多个装饰器组合到一个组件上:

3
上面,如果没有装饰器那么就需要通过 compose 将多个装饰器组合到 App 上;如果使用了装饰器,则可以直接在class App 前直接修饰,如图中的 @inject(‘foo’) @observer,两者对比之下,可以看出通过装饰器来修饰的方式更加简洁易懂。
那 decorators 在 create-react-app 上又是如何使用呢?

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

也就是说要等babel推出一个稳定支持 decorator 版本时才能用得上呗。
但是如果我们现在就想在 create-react-app 中使用 decorator 呢?

4

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

5

你需要为给你的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"
    ]
    }
    这个地方可能会有问题,可以在 .babelrc 文件中加入如下代码即可:
    {
    "presets": ["@babel/preset-env", "react-app"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
    }
    
  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 上的说明来设置它。我没有把它们写在这里,因为它们将来可能会改变。
0赞