chore: 不使用umi预装包，自己安装需要的插件

新增useRefCallback hook

Author: chj_damon

config/config.prod.ts

@@ -6,12 +6,12 @@ export default defineConfig({
   dynamicImport: {
     loading: '@/components/LoadingPage/index',
   },
+  outputPath: 'build',
+  antd: {},
+  esbuild: {},
   dynamicImportSyntax: {},
   hash: true,
-  outputPath: 'build',
   routes: routeConfig,
-  esbuild: {},
-  layout: false,
   metas: [
     { name: 'msapplication-TileColor', content: '#da532c' },
     { name: 'theme-color', content: '#ffffff' },

config/config.ts

@@ -3,12 +3,12 @@ import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';
 import routeConfig from './routeConfig';
 
 export default defineConfig({
+  antd: {},
+  esbuild: {},
   dynamicImportSyntax: {},
   hash: true,
   outputPath: 'build',
   routes: routeConfig,
-  esbuild: {},
-  layout: false,
   metas: [
     { name: 'msapplication-TileColor', content: '#da532c' },
     { name: 'theme-color', content: '#ffffff' },

package.json

@@ -47,11 +47,16 @@
   "dependencies": {
     "@ant-design/pro-form": "^1.18.1",
     "@ant-design/pro-layout": "^6.5.0",
-    "@umijs/preset-react": "1.x",
+    "@umijs/plugin-access": "^2.3.3",
+    "@umijs/plugin-antd": "^0.9.1",
+    "@umijs/plugin-initial-state": "^2.3.0",
+    "@umijs/plugin-model": "^2.5.6",
     "classnames": "^2.2.6",
+    "dayjs": "^1.10.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "umi": "^3.4.2"
+    "umi": "^3.4.2",
+    "umi-request": "^1.3.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.0.1",

src/hooks/useRefCallback.ts

@@ -0,0 +1,13 @@
+import { useCallback, useRef } from 'react';
+
+/**
+ * 将函数挂到 ref 上，保证永远都是拿到最新状态的函数，往外暴露时使用 useCallback 包裹，保证函数引用不更新
+ * @param callback
+ * @returns
+ */
+export default function useRefCallback<T extends (...args: any[]) => any>(callback: T) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  return useCallback((...args: any[]) => callbackRef.current(...args), []) as T;
+}

src/hooks/useToast.tsx

@@ -3,7 +3,6 @@ import { useCallback } from 'react';
 
 export default function useToast() {
   const toastSuccess = useCallback((msg: string) => message.success(msg), []);
-
   const toastFailure = useCallback((msg: string) => message.error(msg), []);
 
   return {