如何在 Create-React-App 中实现 MobX？

Question

在学习 React 和 Redux 时，有人告诉我也应该看看 MobX，因为它更简单。我同意，当向我演示时，我发现它更直观。但是当我尝试在我的 React 项目中实现它时，我运行遇到了很多麻烦，例如使用装饰器、实验性语法警告和修复时我运行陷入了很多麻烦。而且我无法按照教程进行操作，当我尝试时它看起来不一样，从那时起新版本已经到来等等。

安装后：

npm install mobx --save
npm install mobx-react --save

...让我感到困惑的是这 2 个文件用于进一步设置的用法（或者我只需要其中一个？）：

.babelrc
babel.config.js

我是否必须自己创建这些文件（或只创建其中一个）？以及在哪里？？

教程还告诉我更改 package.json 中的 babel 部分，但没有这样的部分。现在我陷入了编译器 (VSCode) 错误：

"Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled".

我执行了运行命令：

npm install @babel/plugin-proposal-decorators

..但是在VSCode.

编译的时候还是出现那个错误

Answer 1

在 MobX 6 中有一个新东西可能会让你完全放弃装饰器，makeAutoObservable:

import { makeAutoObservable } from "mobx"

class Store {
  // Don't need decorators now
  string = 'Test String';

  setString = (string) => {
    this.string = string;
  };

  constructor() {
    // Just call it here
    makeAutoObservable (this);
  }
}

有了它，您甚至不需要启用装饰器语法。

这里有更多信息 https://mobx.js.org/migrating-from-4-or-5.html 和 https://mobx.js.org/react-integration.html

如何在 Create-React-App 中实现 MobX？

How to implement MobX in Create-React-App?

reactjs

visual-studio-code

babeljs

create-react-app

mobx