React整合Ant Design快速使用

Antd

antd
antd是AntDesign的简称，它是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

国外镜像：https://ant.design/docs/react/introduce-cn

国内镜像：https://ant-design.gitee.io/docs/react/introduce-cn

一、React中使用antd

1.首先需要安装antd，进入我们的项目文件打开终端输入。

pnpm install -g antd

2. 也可以使用镜像源进行下载

3.紧接着就是引入样式，只需引入一次即可。

import 'antd/dist/reset.css';

4.下面我们可以开始使用组件了，这里我们选择了下拉菜单，我们选择第一个，看见下方的<>可以点击一下然后选择你需要的代码（ts/js）,在这里我们选择了TypeScript

根据自己业务进行渲染

–基本业务显示

类似vue3 函数调用

二、react 调用api实现数据列表的渲染

async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数（async本身就是异步的意思）， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。
其次，await必须在有关键字async的函数中使用,async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法

await 作用

await 是个运算符，用于组成表达式，await 表达式的运算结果取决于它等的东西。如果它等待的是一个 Promise 对象，等 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。
注⚠️： async 函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。

function takeLongTime() {
	return new Promise(resolve => {
		setTimeout(() => {"..模拟耗时操作.."}, 1000);
	});
}

takeLongTime().then(v => {
	console.log("promise:", v)
})

改用 async/await 形式如下：

function takeLongTime() {
	return new Promise(resolve => {
		setTimeout(() => {"..模拟耗时操作.."}, 1000);
	});
}

async function test() {
	const v = await takeLongTime();
	console.log(v);
}

test();