react项目中使用mobx

什么是mobx

一个比redux简便的状态管理工具

装饰器babel

安装和注册装饰器

1. 安装装饰器

npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D 
1

2. 在vite.config.js中注册装饰器

import {
    defineConfig } from "vite"
import react from "@vitejs/plugin-react"

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [
    react({
   
      babel: {
   
        plugins: [
          ["@babel/plugin-proposal-decorators", {
    legacy: true }],
          ["@babel/plugin-proposal-class-properties", {
    loose: true }],
        ],
      },
    }),
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

完成装饰器注册后，需要重启一次项目
1

理解装饰器

如下的代码，可以在控制台，看到Home这个类组件有个名为study的函数，@addFun这个装饰器，相当于起了和Home=addFun(Home)这句代码一样的作用。
注意：vscode中直接写装饰器会报错，在vscode的设置中搜索Experimental Decorators，启用这个选项即可。

import React, {
    
1