在前端开发中，使用自动化工具可以大大提高开发效率，而 generator-react-mobx-scss 是一个非常方便的 npm 包，可以快速搭建出一个基于 React、MobX 和 SCSS 的工程模板，为开发者提供一个快速开始的方案。
安装
使用 npm 安装，可以全局安装或者局部安装到具体项目中：
npm install -g generator-react-mobx-scss # 全局安装 # 或者 npm install --save-dev generator-react-mobx-scss # 在项目中安装
使用
1. 生成新项目的命令：
yo react-mobx-scss [appName]
- appName：新项目的名称，可选，默认为
generator-react-mobx-scss
生成的目录结构如下：
-- -------------------- ---- -------
-
--- ----------
--- ------------
--- -------------------
--- -------------
--- -----------------
--- ------------
--- ---------
--- ---------
--- ---------
--- ------
- --- -----------
- --- ----------
- --- -----------
- --- -----------
- --- -------------
- --- ----------
--- ---
--- ------
- --- -----
- --- ------
- --- ------
- - --- --------------
- - --- --------
- --- ------
--- ----------
- --- ------
--- --------
--- ------
- --- -----------
- --- --------
--- -----
- --- -------
--- -----
--- -------2. 目录结构说明：
config-overrides.js：配置文件jsconfig.json：用于静态代码分析的配置文件public：静态资源目录src：源码目录assets：图片、视频、字体、样式等资源目录components：React 组件目录stores：MobX 的数据管理目录utils：工具函数目录views：视图组件目录index.js：入口文件
3. 在开发时启动项目的命令：
npm start
4. 在打包时使用命令：
npm run build
示例代码
接下来是示例代码，展示如何使用 MobX 的 @observable、@computed、@action 等装饰器进行数据管理。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --------- ------ - ---- -------------
-------------------
---------
----- --- ------- --------- -
--------- - -- -- -
----- - -------- - - -----------
---------------
--
----------- - -- -- -
----- - -------- - - -----------
-----------------
--
-------- -
----- - -------- - - -----------
----- - ------ ------------ ----------- - - ---------
------ -
-----
--------------
--------------------
--------------------
------- -----------------------------------
------- -------------------------------------
------
--
-
-
------ ------- ----解释：
使用 @inject('appStore') 装饰器将 appStore 注入到组件的 props 中，使用 @observer 装饰器将组件变成响应式的组件。
在组件中，可以直接使用 this.props.appStore 访问到 AppStore 中的数据，例如 count、doubleCount、tripleCount，这些数据可以通过 @computed 标记为计算属性，自动计算并更新，而在修改数据时，可以使用 @action 标记方法，保证修改数据的过程是可追踪的。
更多 MobX 的使用可以查看官方文档：https://mobx.js.org。
总结
使用 generator-react-mobx-scss 可以快速搭建基于 React、MobX 和 SCSS 的工程模板，使得我们能够更加专注于业务逻辑代码的编写，而在开发过程中使用 MobX 可以有效提高数据管理的效率，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a630d0927023822547