本文讲解mobx在react中如何使用，使用 vite + react + typescript

课程开始前，需要掌握以下知识：

1、react 的使用

2、ES 6常用语法

3、vite打包工具

4、了解前端状态管理

开始：

step 1： 使用vite 初始化react-ts项目

npm init vite my-app --template react-ts

step2: 进入项目安装依赖库

npm install

step3: 进入项目安装mobx依赖库

npm install mobx mobx-react -s

step4: 在项目根目录引入mobx-react，绑定依赖

1、从 mobx-react 中导入 provider (app.tsx)

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { Provider } from 'mobx-react'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  
    
      
    
  
)

step5： 编写store (store.ts)

import {
    observable,
    computed,
    action,
    makeAutoObservable
} from 'mobx'

class Store {

    constructor() {
        makeAutoObservable(this)
    }

    @observable time = ''

    @action setTime() {
        this.time = new Date().toLocaleString()
    }
}

const store = new Store()

export default store

step6：在根节点绑定store

import store from './store'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  
    
      
    
  
)

step7：在页面中使用mobx

import { useState } from 'react'
import './App.css'
import { observer } from 'mobx-react'
import store from './store'

function App() {
  const [count, setCount] = useState(0)

  return (
    
      
现在是： {store.time}
    
  )
}

export default observer(App)

注意：

1、编写store时，需要在constructor中调用mobx的makeAutoObservable api

constructor() {
  makeAutoObservable(this)
}

2、在页面使用mobx时，要将组件observer导出一下