组件库的使用与自定义组件 | 青训营笔记

129 阅读2分钟

组件库介绍

组件:具有标准接口和某种功能且可复用的标准零部件 软件组件:封装好的零部件 前端组件——社区组件库(主要是按钮、icon)

前端常用的UI组件库

uTools_1683897885353.png ArcoDesign:设计产出效率提升、协作效率提升、研发开发效率提升 上手教程:安装组件库

npm i @arco-design/web-react

通过 CDN 使用

除了可以通过 npm 安装之外,你也可以直接使用 CDN 资源,我们提供了 umd 格式的代码产物。

不过,我们不建议通过 CDN 使用,因为 CDN 会引入全量的组件代码,这样会影响页面加载速度。 uTools_1683897269782.png

按需加载的概念

按需加载是前端性能优化的一大措施。 顾名思义,按需加载就是根据需要去加载资源。 在js中,我们一般通过一些用户行为或者定时任务去触发一些加载动作。 比如但不限于以下几个情况:鼠标点击、输入文字、拉动滚动条,鼠标移动、窗口大小更改等。

什么是最好的组件

高内聚,低耦合 - 职责清晰,高可维护性。 - 对外提供简单稳定的接口,对内关注内部逻辑的实现。 - 组件和组件之间能简单的配合实现定制的功能。 - 比如: Popver 直接嵌套Input即可实现:在输入框聚焦时显示气泡提示内容。

通用性,易拓展 - 基础组件适用广泛的业务场景 - 适用于不同行业的业务平台 - 业务组件适用于针对性平台 - 具备显著的业务属性,-般基于基础组件开发。 - 比如:通过关键字调接口搜索Lark群聊

思考:前端发展至今,框架层出不穷、组件库也是,所以学习一门语言真的需要一定的适应力,不过好在大部分都有官方文档,方便了不少