组件库的使用与自定义组件 | 青训营笔记
01 组件库介绍
封装好的可复用的程序“零部件”
前端UI组件：“按钮”、“输入框”、“下拉选择”都是组件，组件和组件组合就变成了一个更复杂的组件。
社区组件库
组件库是一系列UI组件的合集
主要包含了日期选择器、按钮组、布局导航组件
包含的每一组件都是用统一设计体系来设计的
提供统一的标准化规范来指导产品搭建
arcoDesign简介
02 组件库的使用
把上一行改成了按需使用的下两行代码
通过CDN资源使用组件库
组件库一般都可以通过codepen直接打开示例代码，方便提供最小化可复现的demo
主题色修改
css进行样式覆盖
将样式复制到业务工程文件里的css文件里
less变量
在less变量修改
或者在在webpack.config.js中修改lessloader的配置项
组件定制
项目开发环节
designlab
主题定制和客制化定制就行
把产物变成npm包发布就可以了，发布完成之后可以用arco组件将刚才的npm包引入
改变日夜模式
从研发角度来看，输入框组件的样式文件，同一个组件在不同亮暗模式下，但是他的背景色和文字色的值不是直接写死成为16进制数的形式，而是使用了css变量的写法。
这个变量是定义在全局的，所以如果要控制亮暗模式变化的话，就是要控制组件读取的css的变量值不同。
所以在这个组件库中，为了切换亮暗样式，只需要直接去操作全局元素上的arco-theme ，如果要设置成为暗色的时候，只需要将arce-theme设置成为dark，而如果要变成亮色的时候，就把arco-theme属性移除掉，控制组件读取亮色模式下的css变量。
局部应用暗色模式
语言国际化
分页条数选择器的组件，这里是通过从全局配置上读取locale语言文件从而进行渲染
RTL/LTR视图
arco-design/zh-CN.tsx at main · arco-design/arco-design (github.com)
这四个点在rtl视图实现时需要考虑
在开启了RTL之后，所以arco组件都有rtl类名
configprovider组件进行改变组件默认表现
在线的demohttps://codesandbox.io/s/crimson-cdn-dppoqi?file=/demo.js
本质提供了一个react的上下文
03自定义组件
有一些通用的组件需要放在一个库中集中维护，例如全选功能的载量组件图片裁剪弹窗，公用的hook函数
关键的划分
拿arco官方物料库做例子[Arco Design - Arco Material](arco.design/material/te… Design/AnimateWall/)
虽然每一个组件都在一个物料库，但是都有各自的json文件
多少个组件发多少个包，无需按需加载
单包架构的时候只需要相对路径就可以引入了，而多包架构的时候就需要引入npm
如果产物支持nodejs模式就要用cjs模式，如果支持cdn引用的话，用umd模式
04什么是好的组件
必须声明这个业务组件
实战
在线demohttps://codesandbox.io/s/restless-morning-4windr?file=/demo.js
总结一下输入、输出
显示引导汽泡就要visable属性，引导步骤就需要step属性
