mobx+react基础

Posted cuter、

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mobx+react基础相关的知识,希望对你有一定的参考价值。

mobx+react

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

  1. 下载安装mobx
npm i mobx mobx-react --save
  1. 使用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
  1. 使用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组件包裹

以上是关于mobx+react基础的主要内容,如果未能解决你的问题,请参考以下文章

React Mobx 基础使用_0.1

从零开始搭建一个 React + Mobx + React Router 脚手架

Jest/React/Mobx:TypeError mobxReact.observer 不是函数

使用 mobx-react-stores 开发 react 应用

React-Router&MobX - Provider

前端实战|React18极客园——登陆模块(token持久化路由拦截mobx封装axios)