mobx的基础知识

最新推荐文章于 2023-11-02 16:09:39 发布

原创最新推荐文章于 2023-11-02 16:09:39 发布 · 599 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

react 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何在React应用中使用MobX进行状态管理，包括安装mobx和mobx-react-lite来支持函数式组件，以及使用mobx和mobx-react针对类组件。通过创建store，实现了数据动态响应，并展示了模块化的状态管理，利用React Context进行统一封装。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.mobx的安装：yarn add mobx mobx-react-lite 这个针对于函数式组件的安装

2.mobx的类组件安装：yarn add mobx mobx-react 这个是对类组件的安装

app 代码:

import { del } from './store/del.js'
import { observer } from 'mobx-react-lite'
// 调用 observer这个函数包裹组件，实现数据的动态响应

function App17() {

  return (
    <div>

      <br />
      {del.add}
      <button onClick={del.addTel}>-1</button>
      <p>{del.List.join('-')}</p>
      <button onClick={del.addCe}>+1</button>
    </div>
  )
}
export default observer(App17)

store代码：

import { makeAutoObservable } from 'mobx'
class DelStore {
  add = 20
  arr = [1, 2, 3, 1, 4, 5, 6]
  constructor() {
    makeAutoObservable(this)
  }
  // 计算属性用get
  get List() {
    return this.arr.filter(item => item > 3)
  }
  // 自减属性函数
  addTel = () => {
    this.add = this.add - 1
  }
  // 自增属性函数
  addCe = () => {
    this.add = this.add + 1
  }
}
const del = new DelStore()
export { del }

3.mobx模块化：

import React from 'react'
import { ListStore } from './listStore'
import { CountStore } from './CountStore'

class RootStore {
  constructor() {
    this.countStore = new CountStore()
    this.listStore = new ListStore()
  }
}
// 实例化操作
const rootStore = new RootStore()
// 使用react context机制完成统一封装
// 查找机制：useContext优先从Provider value 找。找不到就找上一层createContext方法传递过来的默认参数
const context = React.createContext(rootStore)
// 这个方法作用：通过useContext 拿到rootStore实例对象然后返回
const useStore = () => React.useContext(context)

export { useStore }

app代码：

import { observer } from 'mobx-react-lite'
import { useStore } from './store/index.js'
function App18() {
  // 接收一下这个值
  const { countStore, listStore } = useStore()
  // console.log(rootStore)
  // console.log(useStore)
  return (
    <div>
      {countStore.count}
      <button onClick={countStore.cddList}>+1</button>

      函数组件
      {listStore.list.join('-')}
      -----
      <button onClick={listStore.addText}>wode </button>
    </div>
  )
}
export default observer(App18)