React+Mobx基本使用、模块化操作

# 创建项目
$ npm create-react-app react_mobx_app

# 安装mobx
npm install mobx --save

# 中间件工具 mobx-react-lite
$ npm install mobx-react-lite

# 官网推荐：mobx与react绑定库
$ npm install mobx-react --save

// 编写第一个mobx store小案例
import { makeAutoObservable } from 'mobx'

class CounterStore {
  // 1.定义数据
  count = 0
  constructor() {
    // 2.把数据弄成响应式
    makeAutoObservable(this)
  }
  // 3.定义action函数，用来修改数据
  addCount = () => {
    this.count  ;
  }
}

// 4.实例化导出给react使用
const counterStore = new CounterStore()
export { counterStore }

import { counterStore } from '../store/counter'
import { observer } from 'mobx-react-lite'

function Count() {
  return (
    <div>
      {/* 1.把store中的count渲染出来 */}
      <button>{counterStore.count}</button>
      <br /><hr />
      {/* 2.通过点击事件触发action函数，修改count值 */}
      <button onClick={counterStore.addCount}>点我 1</button>
    </div>
  )
}
// 包裹组件让视图响应数据变化
export default observer(Count)

// counterStore.js
import { makeAutoObservable, computed } from 'mobx'

class CounterStore {
  // 1.声明一个list数组
  list = [1, 2, 3, 4, 5, 6]
  constructor() {
    makeAutoObservable(this, {
      // 3.标记计算属性
      // 不标记不影响计算属性的使用，这里的标记只是为了让代码更直观，程序员一看到这行代码就知道filterList是通过计算属性得来的
      filterList: computed
    })
  }
  // 2.定义计算属性
  get filterList() {
    return this.list.filter(item => item > 2)
  }
  changeList = () => {
    this.list.push(7, 8, 9)
  }
}

const counterStore = new CounterStore()
export { counterStore }

// Count.jsx
import { counterStore } from '../store/counter'
import { observer } from 'mobx-react-lite'

function Count() {
  return (
    <div>
      {/* 使用计算属性 */}
      {counterStore.filterList.join('-')}
      <button onClick={counterStore.changeList}>修改List</button>
    </div>
  )
}
// 包裹组件让视图响应数据变化
export default observer(Count)

src
├─App.jsx
├─index.js
├─store
|   ├─count.Store.js
|   ├─index.js
|   └list.Store.js
├─components
|     ├─Count.jsx
|     └List.jsx

import { makeAutoObservable } from 'mobx'
class CountStore {
  count = 0
  constructor() {
    makeAutoObservable(this)
  }
  addCount = () => {
    this.count  
  }
}
export { CountStore }

import { makeAutoObservable } from "mobx";
class ListStore {
  constructor() {
    makeAutoObservable(this)
  }
  list = ['react', 'vue']
  changeList = () => {
    this.list.push('angular')
  }
}
export { ListStore }

// 组合子模块 封装统一导出的供组件使用的方法
import React, { useContext } from "react";
import { CountStore } from "./count.Store";
import { ListStore } from "./list.Store";
class RootStore {
  constructor() {
    // 对子模块进行实例化操作
    // 将来实例化rootstore的时候，rootstore实例上有两个属性，分别存放了子模块的两个实例。
    this.countStore = new CountStore()
    this.listStore = new ListStore()
  }
}
// 使用react context机制，完成统一方法封装

// 1.实例化rootStore注入context
const rootStore = new RootStore()
const context = React.createContext(rootStore)

// 2.导出useStore方法，供组件通过调用该方法使用根实例
// 作用：通过useContext拿到rootStore实例对象，然后返回
// 只要在业务组件中 调用useStore() 就可以拿到 rootStore实例对象
const useStore = () => useContext(context)
export { useStore }

import { observer } from 'mobx-react-lite'
import { useStore } from './store'
function App() {
  const { countStore } = useStore()
  return (
    <div className="App">
      <button onClick={() => countStore.addCount()}>
        {countStore.count}
      </button>
    </div>
  )
}
// 包裹组件让视图响应数据变化
export default observer(App)