Vite+React+Typescript构建实战

点击上方蓝字&＃xff0c;发现更多精彩

导语

最近前端大火的 Vite 2.0 版本终于出来了&＃xff0c;在这里分享一下使用 vite 构建一个前端单页应用以及踩过的坑&＃xff0c;希望能带给大家一些收获。

文章首发于个人博客&＃xff1a;heavenru.com

该文章主要面向对 Vite 感兴趣&＃xff0c;或者做前端项目架构的同学

源码地址&＃xff1a;fe-project-base

https://github.com/lichenbuliren/fe-project-base

通过这篇文章&＃xff0c;你能了解到以下几点&＃xff1a;

• vscode 编辑器配置

• git pre-commit 如何配置

• ESLint &＃43; Pritter 配置

• 标准前端单页应用目录规划

• 从 0 到 1 学习 vite 构建优化

• mobx/6.x &＃43; react &＃43; TypeScript 最佳实践

想快速了解 Vite 配置构建的&＃xff0c;可以直接跳到 这里

初始化项目

这里我们项目名是 fe-project-base 这里我们采用的 vite 2.0 来初始化我们的项目

npm init &＃64;vitejs/app fe-project-base --template react-ts

这个时候&＃xff0c;会出现命令行提示&＃xff0c;咱们按照自己想要的模板&＃xff0c;选择对应初始化类型就 OK 了

安装项目依赖

首先&＃xff0c;我们需要安装依赖&＃xff0c;要打造一个基本的前端单页应用模板&＃xff0c;咱们需要安装以下依赖&＃xff1a;

1. react & react-dom&＃xff1a;基础核心

2. react-router&＃xff1a;路由配置

3. &＃64;loadable/component&＃xff1a;动态路由加载

4. classnames&＃xff1a;更好的 className 写法

5. react-router-config&＃xff1a;更好的 react-router 路由配置包

6. mobx-react & mobx-persist&＃xff1a;mobx 状态管理

7. eslint & lint-staged & husky & prettier&＃xff1a;代码校验配置

8. eslint-config-alloy&＃xff1a;ESLint 配置插件

dependencies:

npm install --save react react-dom react-router &＃64;loadable/component classnames react-router-config mobx-react mobx-persist

devDependencies&＃xff1a;

npm install --save-dev eslint lint-staged husky&＃64;4.3.8 prettier

pre-commit 配置

在安装完上面的依赖之后&＃xff0c;通过 cat.git/hooks/pre-commit 来判断 husky 是否正常安装&＃xff0c;如果不存在该文件&＃xff0c;则说明安装失败&＃xff0c;需要重新安装试试

这里的 husky 使用 4.x 版本&＃xff0c;5.x 版本已经不是免费协议了 测试发现 node/14.15.1 版本会导致 husky 自动创建 .git/hooks/pre-commit 配置失败&＃xff0c;升级 node/14.16.0 修复该问题

在完成了以上安装配置之后&＃xff0c;我们还需要对 package.json 添加相关配置

{"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"src/**/*.{ts,tsx}": ["eslint --cache --fix","git add"],"src/**/*.{js,jsx}": ["eslint --cache --fix","git add"]},
}

到这里&＃xff0c;我们的整个项目就具备了针对提交的文件做 ESLint 校验并修复格式化的能力了

ESLintError↑

编辑器配置

工欲善其事必先利其器&＃xff0c;我们首要解决的是在团队内部编辑器协作问题&＃xff0c;这个时候&＃xff0c;就需要开发者的编辑器统一安装 EditorConfig 插件&＃xff08;这里以 vscode 插件为例&＃xff09;

首先&＃xff0c;我们在项目根目录新建一个配置文件&＃xff1a;.editorconfig 参考配置&＃xff1a;

root &＃61; true
[*]
indent_style &＃61; space
indent_size &＃61; 2
end_of_line &＃61; lf
charset &＃61; utf-8
trim_trailing_whitespace &＃61; true
insert_final_newline &＃61; true

配置自动格式化与代码校验 在 vscode 编辑器中&＃xff0c;Mac 快捷键 command&＃43;, 来快速打开配置项&＃xff0c;切换到 workspace 模块&＃xff0c;并点击右上角的 open settings json 按钮&＃xff0c;配置如下信息&＃xff1a;

{"editor.formatOnSave": true,"editor.codeActionsOnSave": {"source.fixAll.tslint": true},"editor.defaultFormatter": "esbenp.prettier-vscode","[Javascript]": {"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"typescript.tsdk": "node_modules/typescript/lib","[typescriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}

这个时候&＃xff0c;咱们的编辑器已经具备了保存并自动格式化的功能了

ESLint &＃43; Prettier

关于 ESLint 与 Prettier 的关系&＃xff0c;可以移步这里&＃xff1a;彻底搞懂 ESLint 和 Prettier

1、.eslintignore&＃xff1a;配置 ESLint 忽略文件

2、.eslintrc&＃xff1a;ESLint 编码规则配置&＃xff0c;这里推荐使用业界统一标准&＃xff0c;这里我推荐 AlloyTeam 的 eslint-config-alloy&＃xff0c;按照文档安装对应的 ESLint 配置&＃xff1a;

npm install --save-dev eslint typescript &＃64;typescript-eslint/parser &＃64;typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-alloy


3、.prettierignore&＃xff1a;配置 Prettier 忽略文件

4、.prettierrc&＃xff1a;格式化自定义配置

{"singleQuote": true,"tabWidth": 2,"bracketSpacing": true,"trailingComma": "none","printWidth": 100,"semi": false,"overrides": [{"files": ".prettierrc","options": { "parser": "typescript" }}]
}


选择 eslint-config-alloy 的几大理由如下&＃xff1a;

1. 更清晰的 ESLint 提示&＃xff1a;比如特殊字符需要转义的提示等等

   error &＃96;&＃39;&＃96; can be escaped with &＃96;'&＃96;, &＃96;‘&＃96;, &＃96;&＃39;&＃96;, &＃96;’&＃96;  react/no-unescaped-entities


2. 更加严格的 ESLint 配置提示&＃xff1a;比如会提示 ESLint 没有配置指明 React 的 version 就会告警

   Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration


   这里我们补上对 react 版本的配置

   // .eslintrc
{"settings": {"react": {"version": "detect" // 表示探测当前 node_modules 安装的 react 版本}}
}


整体目录规划

一个基本的前端单页应用&＃xff0c;需要的大致的目录架构如下&＃xff1a;

这里以 src 下面的目录划分为例

.
├── app.tsx
├── assets // 静态资源&＃xff0c;会被打包优化
│   ├── favicon.svg
│   └── logo.svg
├── common // 公共配置&＃xff0c;比如统一请求封装&＃xff0c;session 封装
│   ├── http-client
│   └── session
├── components // 全局组件&＃xff0c;分业务组件或 UI 组件
│   ├── Toast
├── config // 配置文件目录
│   ├── index.ts
├── hooks // 自定义 hook
│   └── index.ts
├── layouts // 模板&＃xff0c;不同的路由&＃xff0c;可以配置不同的模板
│   └── index.tsx
├── lib // 通常这里防止第三方库&＃xff0c;比如 jweixin.js、jsBridge.js
│   ├── README.md
│   ├── jsBridge.js
│   └── jweixin.js
├── pages // 页面存放位置
│   ├── components // 就近原则页面级别的组件
│   ├── home
├── routes // 路由配置
│   └── index.ts
├── store // 全局状态管理
│   ├── common.ts
│   ├── index.ts
│   └── session.ts
├── styles // 全局样式
│   ├── global.less
│   └── reset.less
└── utils // 工具方法└── index.ts

OK&＃xff0c;到这里&＃xff0c;我们规划好了一个大致的前端项目目录结构&＃xff0c;接下来我们要配置一下别名&＃xff0c;来优化代码中的&＃xff0c;比如&＃xff1a;importxxxfrom&＃39;&＃64;/utils&＃39; 路径体验

通常这里还会有一个 public 目录与 src 目录同级&＃xff0c;该目录下的文件会直接拷贝到构建目录

别名配置

别名的配置&＃xff0c;我们需要关注的是两个地方&＃xff1a;vite.config.ts & tsconfig.json

其中 vite.config.ts 用来编译识别用的&＃xff1b;tsconfig.json 是用来给 Typescript 识别用的&＃xff1b;

这里建议采用的是 &＃64;/ 开头&＃xff0c;为什么不用 &＃64; 开头&＃xff0c;这是为了避免跟业界某些 npm 包名冲突&＃xff08;例如 &＃64;vitejs&＃xff09;

• vite.config.ts

// vite.config.ts
{resolve: {alias: {&＃39;&＃64;/&＃39;: path.resolve(__dirname, &＃39;./src&＃39;),&＃39;&＃64;/config&＃39;: path.resolve(__dirname, &＃39;./src/config&＃39;),&＃39;&＃64;/components&＃39;: path.resolve(__dirname, &＃39;./src/components&＃39;),&＃39;&＃64;/styles&＃39;: path.resolve(__dirname, &＃39;./src/styles&＃39;),&＃39;&＃64;/utils&＃39;: path.resolve(__dirname, &＃39;./src/utils&＃39;),&＃39;&＃64;/common&＃39;: path.resolve(__dirname, &＃39;./src/common&＃39;),&＃39;&＃64;/assets&＃39;: path.resolve(__dirname, &＃39;./src/assets&＃39;),&＃39;&＃64;/pages&＃39;: path.resolve(__dirname, &＃39;./src/pages&＃39;),&＃39;&＃64;/routes&＃39;: path.resolve(__dirname, &＃39;./src/routes&＃39;),&＃39;&＃64;/layouts&＃39;: path.resolve(__dirname, &＃39;./src/layouts&＃39;),&＃39;&＃64;/hooks&＃39;: path.resolve(__dirname, &＃39;./src/hooks&＃39;),&＃39;&＃64;/store&＃39;: path.resolve(__dirname, &＃39;./src/store&＃39;)}},
}

• tsconfig.json

{"compilerOptions": {"paths": {"&＃64;/*": ["./src/*"],"&＃64;/components/*": ["./src/components/*"],"&＃64;/styles/*": ["./src/styles/*"],"&＃64;/config/*": ["./src/config/*"],"&＃64;/utils/*": ["./src/utils/*"],"&＃64;/common/*": ["./src/common/*"],"&＃64;/assets/*": ["./src/assets/*"],"&＃64;/pages/*": ["./src/pages/*"],"&＃64;/routes/*": ["./src/routes/*"],"&＃64;/hooks/*": ["./src/hooks/*"],"&＃64;/store/*": ["./src/store/*"]},"typeRoots": ["./typings/"]},"include": ["./src", "./typings", "./vite.config.ts"],"exclude": ["node_modules"]
}

从 0 到 1 Vite 构建配置

截止作者写该篇文章时&＃xff0c; vite 版本为 vite/2.1.2&＃xff0c;以下所有配置仅针对该版本负责

配置文件

默认的 vite 初始化项目&＃xff0c;是不会给我们创建 .env&＃xff0c; .env.production&＃xff0c; .env.devlopment 三个配置文件的&＃xff0c;然后官方模板默认提供的 package.json 文件中&＃xff0c;三个 script 分别会要用到这几个文件&＃xff0c;所以需要我们手动先创建&＃xff0c;这里提供官方文档&＃xff1a;.env 配置

# package.json
{"scripts": {"dev": "vite", // 等于 vite -m development&＃xff0c;此时 command&＃61;&＃39;serve&＃39;,mode&＃61;&＃39;development&＃39;"build": "tsc && vite build", // 等于 vite -m production&＃xff0c;此时 command&＃61;&＃39;build&＃39;, mode&＃61;&＃39;production&＃39;"serve": "vite preview","start:qa": "vite -m qa" // 自定义命令&＃xff0c;会寻找 .env.qa 的配置文件;此时 command&＃61;&＃39;serve&＃39;&＃xff0c;mode&＃61;&＃39;qa&＃39;}
}

同时这里的命令&＃xff0c;对应的配置文件&＃xff1a;mode 区分

import { ConfigEnv } from &＃39;vite&＃39;
export default ({ command, mode }: ConfigEnv) &＃61;> {// 这里的 command 默认 &＃61;&＃61;&＃61; &＃39;serve&＃39;// 当执行 vite build 时&＃xff0c;command &＃61;&＃61;&＃61; &＃39;build&＃39;// 所以这里可以根据 command 与 mode 做条件判断来导出对应环境的配置
}

具体配置文件参考&＃xff1a;fe-project-vite/vite.config.ts

路由规划

首先&＃xff0c;一个项目最重要的部分&＃xff0c;就是路由配置&＃xff1b;那么我们需要一个配置文件作为入口来配置所有的页面路由&＃xff0c;这里以 react-router 为例&＃xff1a;

路由配置文件配置

src/routes/index.ts&＃xff0c;这里我们引入的了 &＃64;loadable/component 库来做路由动态加载&＃xff0c;vite 默认支持动态加载特性&＃xff0c;以此提高程序打包效率

import loadable from &＃39;&＃64;loadable/component&＃39;
import Layout, { H5Layout } from &＃39;&＃64;/layouts&＃39;
import { RouteConfig } from &＃39;react-router-config&＃39;
import Home from &＃39;&＃64;/pages/home&＃39;
const routesConfig: RouteConfig[] &＃61; [{path: &＃39;/&＃39;,exact: true,component: Home},// hybird 路由{path: &＃39;/hybird&＃39;,exact: true,component: Layout,routes: [{path: &＃39;/&＃39;,exact: false,component: loadable(() &＃61;> import(&＃39;&＃64;/pages/hybird&＃39;))}]},// H5 相关路由{path: &＃39;/h5&＃39;,exact: false,component: H5Layout,routes: [{path: &＃39;/&＃39;,exact: false,component: loadable(() &＃61;> import(&＃39;&＃64;/pages/h5&＃39;))}]}
]
export default routesConfig

入口 main.tsx 文件配置路由路口

import React from &＃39;react&＃39;
import ReactDOM from &＃39;react-dom&＃39;
import { BrowserRouter } from &＃39;react-router-dom&＃39;
import &＃39;&＃64;/styles/global.less&＃39;
import { renderRoutes } from &＃39;react-router-config&＃39;
import routes from &＃39;./routes&＃39;
ReactDOM.render({renderRoutes(routes)},document.getElementById(&＃39;root&＃39;)
)

这里面的 renderRoutes 采用的 react-router-config 提供的方法&＃xff0c;其实就是咱们 react-router 的配置写法&＃xff0c;通过查看 源码 如下&＃xff1a;

import React from "react";
import { Switch, Route } from "react-router";
function renderRoutes(routes, extraProps &＃61; {}, switchProps &＃61; {}) {return routes ? (
{routes.map((route, i) &＃61;> ( route.render ? ( route.render({ ...props, ...extraProps, route: route }) ) : ( ) } /> ))}
) : null; } export default renderRoutes;

通过以上两个配置&＃xff0c;咱们就基本能把项目跑起来了&＃xff0c;同时也具备了路由的懒加载能力&＃xff1b;

执行 npm run build&＃xff0c;查看文件输出&＃xff0c;就能发现我们的动态路由加载已经配置成功了

$ tsc && vite build
vite v2.1.2 building for production...
✓ 53 modules transformed.
dist/index.html                  0.41kb
dist/assets/index.c034ae3d.js    0.11kb / brotli: 0.09kb
dist/assets/index.c034ae3d.js.map 0.30kb
dist/assets/index.f0d0ea4f.js    0.10kb / brotli: 0.09kb
dist/assets/index.f0d0ea4f.js.map 0.29kb
dist/assets/index.8105412a.js    2.25kb / brotli: 0.89kb
dist/assets/index.8105412a.js.map 8.52kb
dist/assets/index.7be450e7.css   1.25kb / brotli: 0.57kb
dist/assets/vendor.7573543b.js   151.44kb / brotli: 43.17kb
dist/assets/vendor.7573543b.js.map 422.16kb
✨  Done in 9.34s.

细心的同学可能会发现&＃xff0c;上面咱们的路由配置里面&＃xff0c;特意拆分了两个 Layout & H5Layout&＃xff0c;这里这么做的目的是为了区分在微信 h5 与 hybird 之间的差异化而设置的模板入口&＃xff0c;大家可以根据自己的业务来决定是否需要 Layout 层

样式处理

说到样式处理&＃xff0c;这里咱们的示例采用的是 .less 文件&＃xff0c;所以在项目里面需要安装对应的解析库

npm install --save-dev less postcss

如果要支持 css modules 特性&＃xff0c;需要在 vite.config.ts 文件中开启对应的配置项&＃xff1a;

//  vite.config.ts
{css: {preprocessorOptions: {less: {// 支持内联 JavascriptJavascriptEnabled: true}},modules: {// 样式小驼峰转化,//css: goods-list &＃61;> tsx: goodsListlocalsConvention: &＃39;camelCase&＃39;}},
}

编译构建

其实到这里&＃xff0c;基本就讲完了 vite 的整个构建&＃xff0c;参考前面提到的配置文件&＃xff1a;

export default ({ command, mode }: ConfigEnv) &＃61;> {const envFiles &＃61; [/** mode local file */ &＃96;.env.${mode}.local&＃96;,/** mode file */ &＃96;.env.${mode}&＃96;,/** local file */ &＃96;.env.local&＃96;,/** default file */ &＃96;.env&＃96;]const { plugins &＃61; [], build &＃61; {} } &＃61; configconst { rollupOptions &＃61; {} } &＃61; buildfor (const file of envFiles) {try {fs.accessSync(file, fs.constants.F_OK)const envConfig &＃61; dotenv.parse(fs.readFileSync(file))for (const k in envConfig) {if (Object.prototype.hasOwnProperty.call(envConfig, k)) {process.env[k] &＃61; envConfig[k]}}} catch (error) {console.log(&＃39;配置文件不存在&＃xff0c;忽略&＃39;)}}const isBuild &＃61; command &＃61;&＃61;&＃61; &＃39;build&＃39;// const base &＃61; isBuild ? process.env.VITE_STATIC_CDN : &＃39;//localhost:3000/&＃39;config.base &＃61; process.env.VITE_STATIC_CDNif (isBuild) {// 压缩 Html 插件config.plugins &＃61; [...plugins, minifyHtml()]}if (process.env.VISUALIZER) {const { plugins &＃61; [] } &＃61; rollupOptionsrollupOptions.plugins &＃61; [...plugins,visualizer({open: true,gzipSize: true,brotliSize: true})]}// 在这里无法使用 import.meta.env 变量if (command &＃61;&＃61;&＃61; &＃39;serve&＃39;) {config.server &＃61; {// 反向代理proxy: {api: {target: process.env.VITE_API_HOST,changeOrigin: true,rewrite: (path: any) &＃61;> path.replace(/^\/api/, &＃39;&＃39;)}}}}return config
}

在这里&＃xff0c;我们利用了一个 dotenv 的库&＃xff0c;来帮我们将配置的内容绑定到 process.env 上面供我们配置文件使用

详细配置请参考 demo&＃xff1a;https://github.com/lichenbuliren/fe-project-base

构建优化

1. 为了更好地、更直观的知道项目打包之后的依赖问题&＃xff0c;我们&＃xff0c;我们可以通过 rollup-plugin-visualizer 包来实现可视化打包依赖

2. 在使用自定义的环境构建配置文件&＃xff0c;在 .env.custom 中&＃xff0c;配置

   # .env.custom
NODE_ENV&＃61;production


   截止版本 vite&＃64;2.1.5&＃xff0c;官方存在一个 BUG&＃xff0c;上面的 NODE_ENV&＃61;production 在自定义配置文件中不生效&＃xff0c;可以通过以下方式兼容

   // vite.config.ts
const config &＃61; {...define: {&＃39;process.env.NODE_ENV&＃39;: &＃39;"production"&＃39;}...
}


4. antd-mobile 按需加载&＃xff0c;配置如下&＃xff1a;

   import vitePluginImp from &＃39;vite-plugin-imp&＃39;
// vite.config.ts
const config &＃61; {plugins: [vitePluginImp({libList: [{libName: &＃39;antd-mobile&＃39;,style: (name) &＃61;> &＃96;antd-mobile/es/${name}/style&＃96;,libDirectory: &＃39;es&＃39;}]})]
}


   以上配置&＃xff0c;在本地开发模式下能保证 antd 正常运行&＃xff0c;但是&＃xff0c;在执行 build 命令之后&＃xff0c;在服务器访问会报一个错误

   &＃xff0c;类似 issue 可以参考

   解决方案 手动安装单独安装 indexof npm 包&＃xff1a;npm install indexof

mobx6.x &＃43; react &＃43; typescript 实践

作者在使用 mobx 的时候&＃xff0c;版本已经是 mobx&＃64;6.x&＃xff0c;发现这里相比于旧版本&＃xff0c;API 的使用上有了一些差异&＃xff0c;特地在这里分享下踩坑经历

Store 划分

store 的划分&＃xff0c;主要参考本文的示例 需要注意的是&＃xff0c;在 store 初始化的时候&＃xff0c;如果需要数据能够响应式绑定&＃xff0c;需要在初始化的时候&＃xff0c;给默认值&＃xff0c;不能设置为 undefined 或者 null&＃xff0c;这样子的话&＃xff0c;数据是无法实现响应式的

// store.ts
import { makeAutoObservable, observable } from &＃39;mobx&＃39;
class CommonStore {// 这里必须给定一个初始化的只&＃xff0c;否则响应式数据不生效title &＃61; &＃39;&＃39;theme &＃61; &＃39;default&＃39;constructor() {// 这里是实现响应式的关键makeAutoObservable(this)}setTheme(theme: string) {this.theme &＃61; theme}setTitle(title: string) {this.title &＃61; title}
}
export default new CommonStore()

Store 注入

mobx&＃64;6x的数据注入&＃xff0c;采用的 react 的 context 特性&＃xff1b;主要分成以下三个步骤

根节点变更

通过 Provider 组件&＃xff0c;注入全局 store

// 入口文件 app.tsx
import { Provider } from &＃39;mobx-react&＃39;
import counterStore from &＃39;./counter&＃39;
import commonStore from &＃39;./common&＃39;
const stores &＃61; {counterStore,commonStore
}
ReactDOM.render({renderRoutes(routes)},document.getElementById(&＃39;root&＃39;)
)

这里的 Provider 是由 mobx-react 提供的 通过查看源码我们会发现&＃xff0c; Provier内部实现也是 React Context&＃xff1a;

// mobx-react Provider 源码实现
import React from "react"
import { shallowEqual } from "./utils/utils"
import { IValueMap } from "./types/IValueMap"
// 创建一个 Context
export const MobXProviderContext &＃61; React.createContext({})
export interface ProviderProps extends IValueMap {children: React.ReactNode
}
export function Provider(props: ProviderProps) {// 除开 children 属性&＃xff0c;其他的都作为 store 值const { children, ...stores } &＃61; propsconst parentValue &＃61; React.useContext(MobXProviderContext)// store 引用最新值const mutableProviderRef &＃61; React.useRef({ ...parentValue, ...stores })const value &＃61; mutableProviderRef.currentif (__DEV__) {const newValue &＃61; { ...value, ...stores } // spread in previous state for the context based storesif (!shallowEqual(value, newValue)) {throw new Error("MobX Provider: The set of provided stores has changed. See: https://github.com/mobxjs/mobx-react#the-set-of-provided-stores-has-changed-error.")}}return {children}
}
// 供调试工具显示 Provider 名称
Provider.displayName &＃61; "MobXProvider"

Store 使用

因为函数组件没法使用注解的方式&＃xff0c;所以咱们需要使用自定义 Hook 的方式来实现&＃xff1a;

// useStore 实现
import { MobXProviderContext } from &＃39;mobx-react&＃39;
import counterStore from &＃39;./counter&＃39;
import commonStore from &＃39;./common&＃39;
const _store &＃61; {counterStore,commonStore
}
export type StoreType &＃61; typeof _store
// 声明 store 类型
interface ContextType {stores: StoreType
}
// 这两个是函数声明&＃xff0c;重载
function useStores(): StoreType
function useStores(storeName: T): StoreType[T]
/*** 获取根 store 或者指定 store 名称数据* &＃64;param storeName 指定子 store 名称* &＃64;returns typeof StoreType[storeName]*/
function useStores(storeName?: T) {// 这里的 MobXProviderContext 就是上面 mobx-react 提供的const rootStore &＃61; React.useContext(MobXProviderContext)const { stores } &＃61; rootStore as ContextTypereturn storeName ? stores[storeName] : stores
}
export { useStores }

组件引用通过自定义组件引用 store

import React from &＃39;react&＃39;
import { useStores } from &＃39;&＃64;/hooks&＃39;
import { observer } from &＃39;mobx-react&＃39;
// 通过 Observer 高阶组件来实现
const HybirdHome: React.FC &＃61; observer((props) &＃61;> {const commonStore &＃61; useStores(&＃39;commonStore&＃39;)return (<>