mobx在hooks中使用

创建仓库还是和之前一样，在 store/appStore.js 中

import { observable } from "mobx";

class AppStore {
  @observable a = "1154545";
}
export default AppStore;

在 stroe/index.js 中

import React from "react";
import appStore from "./AppStore";

// 这里我们注意需要使用createContext
const StoresContext = React.createContext({
  appStore,
});

export default StoresContext;

在 hooks/index.js 中我们新增 useStores 自定义 hooks

import React from "react";
import StoresContext from "../store/index";

export const useStores = () => React.useContext(StoresContext);

1. 使用方式一
   组件中，比如 App 组件 App.jsx

import React from "react";
import { useStores } from "./hooks/index";
import { useObserver } from "mobx-react-lite";
import App2 from "./components/App2";
import "./App.css";
import Ob from "./components/Ob";

// 方式一
// 注意使用mobx-react-lite的 useObserver
// 和mobx-react中的observer基本没有区别

function App() {
  const { appStore } = useStores(); // 获取store
  console.log("App");
  return useObserver(() => (
    <div
      className="App"
      // onClick={() => appStore.add()}
    >
      {appStore.a}
      <App2 />
      <Ob />
    </div>
  ));
}

export default App;

2. 使用方式二
   在 App2 中举例

import React, { memo } from "react";
import { observer, useObserver } from "mobx-react";
import { useStores } from "../hooks";

export default observer(function App2() {
  const { appStore } = useStores();
  console.log("app2");
  return <div onClick={() => appStore.add()}>{appStore.a}</div>;
});

3. 使用方式三
   在 Ob 组件中举例

import React, { memo } from "react";
import { Observer } from "mobx-react";
import { useStores } from "../hooks";

function Ob() {
  const { appStore } = useStores();
  console.log("Ob");
  return (
    <div onClick={() => appStore.add()}>
      <Observer>{() => appStore.a}</Observer>
    </div>
  );
}

export default memo(Ob);

以上就是最近在 hooks 中写 mobx 比较爽的方式