前端初学者的AntDesignProV6总结（上）

一、UI组件开发流程

1. () &＃61;> {} 通用&＃xff08;异步&＃xff09;函数
2. useEmotionCss 定义CSS
3. useModel获取全局状态
4. useCallback 处理React合成事件
5. JSX 拆分组件
6. initiateState 中CurrentUser空值处理
7. initiateState 中其他值的空值处理
8. 定义JSX中所使用的配置信息
9. return JSX

二、默认Footer

参考资料&＃xff1a;https://procomponents.ant.design/components/layout/#footer

可用于简易Footer&＃xff0c;antd pro默认Footer

三、Mock

参考资料&＃xff1a;https://umijs.org/docs/guides/mock

Umi 约定 /mock 目录下的所有文件为 Mock 文件&＃xff0c;例如这样的目录结构&＃xff1a;

.
├── mock
├── todos.ts
├── items.ts
└── users.ts
└── src
└── pages
└── index.tsx


目前支持两种方式

字面量函数

export default {
&＃39;/api/users&＃39;: [
{ id: 1, name: &＃39;foo&＃39; },
{ id: 2, name: &＃39;bar&＃39; }
],
&＃39;/api/users/1&＃39;: { id: 1, name: &＃39;foo&＃39; },
}


可以使用defineMock帮助声明mock

export default defineMock({
"/api/users": [
{ id: 1, name: "foo" },
{ id: 2, name: "bar" },
],
"/api/users/1": { id: 1, name: "foo" },
"GET /api/users/2": (req, res) &＃61;> {
res.status(200).json({ id: 2, name: "bar" });
},
});


自定义函数

export default {
&＃39;POST /api/users/create&＃39;: (req, res) &＃61;> {
// 添加跨域请求头
res.setHeader(&＃39;Access-Control-Allow-Origin&＃39;, &＃39;*&＃39;);
res.end(&＃39;ok&＃39;);
}
}


关闭Mock

配置方式

// .umirc.ts
export default {
mock: false,
};


环境变量方式&＃xff08;package.json&＃xff09;

MOCK&＃61;none umi dev


四、国际化

国际化字符串处理流程

参考资料&＃xff1a;https://umijs.org/docs/max/i18n#useintl

const intl &＃61; useIntl(); // 国际化
const defaultMessage &＃61; intl.formatMessage({
id: &＃39;app.copyright.produced&＃39;,
defaultMessage: &＃39;蚂蚁集团体验技术部出品&＃39;,
});


字符串定义

在locales > zh-CN / zh-CN 定义常量

五、基于Hooks的简易数据流

参考资料&＃xff1a;https://umijs.org/docs/max/data-flow

antd pro v6使用useModel &＃43; useRequest管理简易数据流。

数据流插件将数据流分为Model&＃xff08;stoore、action&＃xff09;、useMode、useRequestl&＃xff08;处理副作用&＃xff09;配置使用达到数据流管理的目的。

定义Model

2. Model采用约定式目录结构&＃xff0c;约定在src/models和src/pages/xxxx/models/
3. Model即命名空间&＃xff0c;它可以划分数据流&＃xff0c;src/models/count.ts命名空间即count&＃xff0c;src/pages/pageA/model.ts命名空间即pageA.model。
4. src/models 目录下不支持目录嵌套定义 model
5. pages/xxx/models 下 model 定义支持嵌套定义
6. Model就是个自定义Hooks&＃xff0c;它需要一个默认导出的函数
7. Model中可以使用useState&＃xff0c;useEffect等其他的Hooks

// src/models/userModel.ts
import { useState } from &＃39;react&＃39;;
import { getUser } from &＃39;&＃64;/services/user&＃39;;

export default () &＃61;> {
const [user, setUser] &＃61; useState({});
const [loading, setLoading] &＃61; useState(true);

useEffect(() &＃61;> {
getUser().then((res) &＃61;> {
setUser(res);
setLoading(false);
});
}, []);

return {
user,
loading,
};
};


8. 可以利用aHooks中的useRequest简化请求流程

// src/models/userModel.ts
import { useRequest } from &＃39;ahooks&＃39;;
import { getUser } from &＃39;&＃64;/services/user&＃39;;

export default () &＃61;> {
const { data: user, loading: loading } &＃61; useRequest(async () &＃61;> {
const res &＃61; await getUser();
if (res) {
return res;
}
return {};
});

return {
user,
loading,
};
};


使用Model

// src/components/Username/index.tsx
import { useModel } from &＃39;umi&＃39;;

export default () &＃61;> {
const { user, loading } &＃61; useModel(&＃39;userModel&＃39;);

return (
{loading ? <>:

性能优化

使用useModel第二个参数回调中的model可以过滤不需要的参数&＃xff0c;避免组件重复渲染。

// src/components/CounterActions/index.tsx
import { useModel } from &＃39;umi&＃39;;

export default () &＃61;> {
const { add, minus } &＃61; useModel(&＃39;counterModel&＃39;, (model) &＃61;> ({
add: model.increment,
minus: model.decrement,
}));

return (


InitialState

参考资料&＃xff1a;https://pro.ant.design/zh-CN/config/runtime-api#getinitialstate

antd pro默认会创建一个初始数据InitialState。

app.tsx中的 getInitialState 会被umi自动执行&＃xff0c;用于获取初始化数据&＃xff0c;初始化数据可使用 useModel 在各个组件中作为简易数据流的一部分使用。

它包含如下所示的settings&＃xff0c;currentUser&＃xff0c;loading&＃xff0c;fetchUserInfo&＃xff0c;如有更多数据可自定添加TS类型声明

export async function getInitialState(): Promise<{
settings?: Partial; // 布局配置&＃xff0c;不用管
currentUser?: API.CurrentUser; // 当前用户
loading?: boolean; // 是否加载完成&＃xff0c;不用管
fetchUserInfo?: () &＃61;> Promise; // 获取用户信息
}> {}


在组件的其他区域可以使用initialState&＃xff0c;使用方式如下

const { initialState, setInitialState } &＃61; useModel(&＃39;&＃64;&＃64;initialState&＃39;);
const fetchUserInfo &＃61; async () &＃61;> {
const userInfo &＃61; await initialState?.fetchUserInfo?.();
if (userInfo) {
flushSync(() &＃61;> {
setInitialState((s) &＃61;> ({
...s,
currentUser: userInfo,
}));
});
}
};


关于其他useModel可参考antd pro和umi关于简易数据流的文档

https://pro.ant.design/zh-CN/docs/simple-model

https://v3.umijs.org/zh-CN/plugins/plugin-model

六、主题

config.defaultSetting.ts中可以配置配色方案和token&＃xff0c;关于token可参考

https://ant.design/docs/react/customize-theme-cn#%E4%BD%BF%E7%94%A8-design-token

config.ts中的theme字段可以做进一步的配置

具体可以参考&＃xff1a;https://umijs.org/docs/api/config#theme

我觉得没什么好配置的。

七、配置文件

需要修改的几个配置

defaultSetting.ts

title: &＃39;RBAC权限系统&＃39;,
logo: &＃39;https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg&＃39;,
token: {},
pwa: true,


八、路由配置

添加页面

参考文档&＃xff1a;https://pro.ant.design/zh-CN/docs/new-page

有两种方式

1. 在pages下新建Component&＃xff0c;再在config.routes中注册页面
2. 使用umi微生成器生成界面&＃xff0c;再在config.routes中注册页面

九、Umi微生成器

参考文档&＃xff1a;https://umijs.org/docs/guides/generator

Umi 中内置了众多微生成器&＃xff0c;协助你在开发中快速的完成一些繁琐的工作。

生成页面

以目录方式生成页面&＃xff0c;目录下为页面的组件和样式文件&＃xff1a;

$umi g page bar --dir
Write: src/pages/bar/index.less
Write: src/pages/bar/index.tsx


编辑页面模板

由于Antd Deisign Pro V6默认使用All in js的方案&＃xff0c;而生成器生成的代码使用less方案&＃xff0c;建议修改默认的模版

生成DVA

为项目开启 Dva 配置&＃xff0c;命令执行后&＃xff0c;umi 会生成 Dva

$umi g dva
set config:dva on /Users/umi/umi-playground/.umirc.ts
set config:plugins on /Users/umi/umi-playground/.umirc.ts
info - Update config file
info - Write example model