创建仓库还是和之前一样，在 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);
- 使用方式一
组件中，比如 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;
- 使用方式二
在 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>;
});
- 使用方式三
在 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 比较爽的方式
