毫无bug！在create-react-app中使用mobx装饰器模式

2023-10-10 07:39:06

前言

MobX是一种流行的状态管理库，它允许你使用装饰器来简化组件的编写。然而，如果你使用create-react-app来构建你的React项目，那么你会发现默认情况下是不支持MobX装饰器的。这是因为create-react-app使用Babel来编译你的代码，而Babel默认情况下不支持装饰器。

修改项目配置

为了在create-react-app中使用MobX装饰器，我们需要修改项目配置。有两种方法可以做到这一点：

方法一：使用react-app-rewired

react-app-rewired是一个工具，它允许你修改create-react-app的默认配置。要使用react-app-rewired，你需要安装它：

npm install react-app-rewired --save-dev

然后，你需要在你的项目根目录创建一个名为config-overrides.js的文件。在这个文件中，你可以添加以下代码：

const { override, useBabelRc, addWebpackModuleRule } = require('react-app-rewired');

module.exports = override(
  useBabelRc(),
  addWebpackModuleRule({
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env', '@babel/preset-react'],
        plugins: ['@babel/plugin-proposal-decorators'],
      },
    },
  }),
);

方法二：使用eject

eject是一个命令，它允许你从create-react-app中导出你的项目。这将给你完全控制项目的配置。要使用eject，你需要运行以下命令：

npm run eject

运行eject命令后，你将需要在你的项目根目录创建一个名为babel.config.js的文件。在这个文件中，你可以添加以下代码：

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: ['@babel/plugin-proposal-decorators'],
};

使用MobX装饰器

一旦你修改了项目配置，你就可以开始使用MobX装饰器了。为了使用装饰器，你需要安装MobX：

npm install mobx --save

然后，你就可以在你的组件中使用MobX装饰器了。例如，以下代码展示了如何使用@observable装饰器来创建一个可观察的变量：

import { observable } from 'mobx';

class MyComponent extends React.Component {
  @observable count = 0;

  render() {
    return (
      <div>
        <p>Count: {this.count}</p>
        <button onClick={() => this.count++}>Increment</button>
      </div>
    );
  }
}