从0搭建React+antd+TypeScript+Umi Hooks+Mobx前端框架

Posted 2023-05-04

参考技术A 因为现在公司的主要技术栈是React,所以也想着能够搭建一个好的React前端框架，方便在工作中使用；框架在打包过程也做了优化，多线程，拆包，缓存等等手段提升打包速度和质量。主要用到的库包括：

创建带TypeScript模板的react-app，推荐使用yarn,接下来我也主要以yarn做例子

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。antd按需加载以及自定义主题

重新打包就可以了， 所有的主题配置在这里噢

这里利用React-router做路由，同时也会根据用户角色，做权限处理；只有当角色和路由允许的角色一致时才可以访问和展示。

新建router下新建indext.tsx 用于渲染页面

引入Router/index.tsx

新建hasPermission.ts,如果页面 roles 包括用户的角色则返回true,在渲染menu和子页面的时候就根据这个值渲染页面。

比如Home页面，渲染子页面的逻辑：

在这里 SubPages1 下面的 page1 就无法展示出来和访问，如果直接输入路由也会访问页面不存在，因为page1允许的角色 user 而我们角色是 admin 所以无法展示。

useImmer 很好的解决了ReactHooks中的赋值的性能问题，可以单独更新某个对象的某个属性。

上面的赋值方法也可以写到一起,效果是一样的：

Umi Hooks 是一个 React Hooks 库，致力提供常用且高质量的 Hooks。提供了非常多的Hooks组件，比如上面使用的 usePersistFn ，他的作用：在某些场景中，你可能会需要用 useCallback 记住一个回调，但由于内部函数必须经常重新创建，记忆效果不是很好，导致子组件重复 render。对于超级复杂的子组件，重新渲染会对性能造成影响。通过 usePersistFn ，可以保证函数地址永远不会变化。Umi Hooks功能还是非常强大的，有很多功能很强大的API。大家可以去官方文档看看 https://hooks.umijs.org/zh-CN/hooks/life-cycle/use-update-effect 。

自定义 hooks 其实在我们的开发工作中，还是很常遇到的。 hooks 的好处就是可以抽离公共方法，像组件一样的随意使用，对于快节奏的开发工作还是很舒服的，比如你觉得 react hooks 或者 umi hooks 的api，不能满足自己的需求，也可以自己创新一些api。我这里举个例子，大家写 class 组件写的很多的话，会经常用的 this.setState() ，大家都知道 this.setState() 是异步执行，你无法直接拿到最新的 state 。 hooks 中的 useState 同样也是异步的，你无法直接获取到最新的 state ，所以我自己写了一个 useSetState 方法，用于在修改完状态后能够立即拿到最新的 state 。
我们在src/hooks文件夹下新建 useSetState.ts

使用的方式也很简单，基本和useState一致，只是在setState的时候提供一个回调函数。

这就完成了带回调的 useSetState hooks 的编写，不过这种写法不太推荐在 hooks 中使用，建议需要获取最新的数值都在 useEffect 或者 useUpdateEffect(umi hooks) 中去。

状态管理选择的Mobx,Mobx和Redux我都用过，不过当我习惯用Mobx后，就感觉还是Mobx更方便一些，所以更喜欢在项目中用Mobx,现在Mobx已经更新到5.0版本了，不过5.0版本并不支持ie11，所以如果想要兼容性可以选择4.0的版本，或者Redux。
这里推荐一个针对Mobx的库， mobx-react-lite :它是基于 React 16.8 和 Hooks 的 MobX 的轻量级React绑定。

这个主要影响的是调用方法的形式，对于Mobx的书写是一样的，比如写一个加减数值：

这里你的typeScirpt可能会编译不了，会报错：Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
解决方法是在 tsconfig.json 加入配置：

完毕以后，一定要把 storeProvider 包裹所需要共享状态的页面，我这里直接放到app.tsx

剩下来就仅仅是调用的事情了：

此外axios的配置应该大家都知道，所以我这也不多说了，具体在我的源码里面也有，utils下的axios.ts

加入了打包分析 webpack-bundle-analyzer speed-measure-webpack-plugin
加入了打包进度条 webpackbar
加入了打包压缩 compression-webpack-plugin terser-webpack-plugin
还对包进行拆包
开发环境的域名代理 devServer
加快打包速度，还可以考虑删除antd-icons，单独去iconfont网站下，按需引入。不然打包会费很多时间

引入dotenv-cli

新增开发环境配置文件 .env.development 和 .env.production 两个文件

然后修改package.json中的启动脚本：

现在 yarn start 或者 yarn build 就会根据环境配置来处理。

还有一些细节的调整，会尽力将这个框架更加完善的。

github地址： https://github.com/Benzic/React-typescript-umihooks-mobx
欢迎star 和提意见

Rails + React +antd + Redux环境搭建

 前提条件：node和ruby on rails必须已经安装好（相关安装流程不再此处介绍）

 1.nvm、node

 2.npm or yarn装一个就好

 3.rvm、ruby on rails

 4.foreman

一、新建一个rails项目后加入react gem包

1.Gemfile文件添加gem \'react_on_rails\', \'~>6\'         # use latest gem version > 6
2.bundle install安装gem包
3.rails generate react_on_rails:install   or  rails generate react_on_rails:install --redux
4.进入项目client文件夹下执行 npm install  or  yarn install  

二、引入antd

1.在项目client文件夹下执行：
  npm install antd --save
  npm install babel-plugin-antd --save
  npm install babel-plugin-import --save    (该插件是用来按需加载 antd 的脚本和样式的)
  npm install style-loader -save
  npm install css-loader -save

2.修改client文件夹下 .babelrc 文件为
  {
    "presets": ["es2015", "stage-2", "react"],
    "plugins": [["antd", [{ "libraryName": "antd", "style": "css" }]]]   （该行为新增行）
  }

3.编辑webpack.config.js文件，在module的rules中新增如下红色字体内容

  module: {

    rules: [

      {

        test: require.resolve(\'react\'),

        use: {

          loader: \'imports-loader\',

          options: {

            shim: \'es5-shim/es5-shim\',

            sham: \'es5-shim/es5-sham\',

          }

        },

      },

      {

        test: /\\.jsx?$/,

        use: \'babel-loader\',

        exclude: /node_modules/,

      },

      {

        test: /\\.css$/,

        loader: \'css?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!!\',

        exclude: /node_modules/

      },

      {

        test: /\\.(css|less)$/,

        loader: "style-loader!css-loader"

      },

    ],

  }

三、运行服务

1.foreman start -f Procfile.dev

2. 访问 http://localhost:3000/hello_world 后将看到如下内容