mobx+react基础

Posted 2021-09-01 cuter、

mobx+react

mobx可以作为一个全局状态管理，可以解决react的复杂的组件间通信问题

1. 下载安装mobx

npm i mobx mobx-react --save

2. 使用mobx（类式组件）

//1.先定义一个store
import { makeAutoObservable } from 'mobx'
class Store {
  username: string = 'name'
  setUsername(name: string) {
    this.username = name
  }
  constructor() {
    makeAutoObservable(this)
  }
}
export default new Store()
//2.组件使用mobx
import { observer } from 'mobx-react'
import store from '../../store'
//装饰器语法
@observer
export default class ComB extends React.Component{
render() {
    return (
      <div>
        ComB: {store.username}{' '}
        <button
          onClick={() =>
            store.setUsername('s')
          }>
          change
        </button>
      </div>
    )
  }
}
//这样点击按钮后就会更改mobx里面的username的值为s

3. 使用mobx（函数式组件）
   第一步定义一个全局store都一样，但还需要下载依赖

npm i mobx-react-lite

import StoreColor from '../../Store/store'
import { Observer } from 'mobx-react-lite'
//函数式组件是不能使用装饰器语法的，这里采用Observer组件
return(
 <Observer>
 { 
 ()=>(
 <div className={StoreColor.color}>
                  <span>
                    Open
                    <br />
                    打开
                  </span>
                </div>
  )
 }
 </Observer>
)

对需要变化的组件，用Observe组件包裹