hooks+mobx实现状态管理及数据共享

对开发过程做一个小小记录

定义一个createStore的hooks。（引用方式看项目风格而已，是统一的store目录下做模块化状态管理，还是在每一个页面下创建store，自行选择。）

// create-store.ts
import React from 'react'
export function createStore<T>(
  ClassFactory: new () => T,
): [() => T, T, React.Context<T>] {
  const store = new ClassFactory() // 传入的是一个class或者构造函数，通过new方式创建一个实例
  const context = React.createContext(store) // 通过React.createContext创建一个可以数据共享的上下文
  // 利用React.useContext将上下文环境通过useStor 方法返回，可以在不同组建中引入时，确保数据的实时性
  const useStore = () => React.useContext(context) 
  return [ useStore, store, context]
}

定义一个测试类+mobx的makeAutoObservable/makeObservable方法，使得这个类中的属性具有响应式

// teststore.ts
import { makeAutoObservable } from 'mobx'
import { createStore } from './create-store.ts'

class Text {
  constructor(){
    // makeAutoObservable 与 makeObservable 的区别是，makeObservable需要定义属性的类型，具体可以看mobx的文档
    // makeObservable(this, { increment: action, ... }) action通过import从mobx引入。
    // makeAutoObservable则会自动推断所有属性的类型，无需自己定义类型
    makeAutoObservable(this) // 将实例变得具有响应式
  }
  count = 0
  increment = () => {
    this.count++
  }
  decrement = () => {
    this.count--
  }

  get doublecount(){
    return this.count * 2
  }
}

// 调用createStore方法后，相当于建立了一个状态管理仓库（模块），在组件中调用useStore就可以获取到上下文
export const [useStore, store, storeContext] = createStore(Text)

在组件中引入store的方式也比较简单，通过teststore.ts文件中export出来的useStore方法，便可获取到该状态管理仓库（模块）的数据。例：

// testCompontent.tsx
import React from 'react'
import { observer } from 'mobx-react-lite' // mobx-react-lite是mobx-react的轻量版
import { useStore } from './teststore.ts'

// observer包裹： 自动订阅在react组件渲染期间被使用到的可观察对象属性，当他们变化发生时，组件就会自动进行重新渲染。
const Comp: React.FC = observer(()=>{
  // 将testStore的上下文环境赋值给变量store
  // 如果只用到某个属性可以用解构的方法，const { count } = useStore()
  const store = useStore() 
  
  return (
    <div>
      <div>当前值:{store.count}</div>
      <div>双倍值:{store.doublecount}</div>
      <button onClick={() => store.increment()}>加1</button>
    </div>
  )
})
export default Comp