什么是组件？
在传统工业中是：具有标准接口和某种功能且可复用的标准零部件
在计算机科学中是：封装好的可复用的程序的“零部件”
前端ui组件：“按钮” “输入框”“下拉选择”都是组件，组件和组件的组合就变成了一个更复杂的组件
组件库：一系列UI组件的合集
意义：提供统一的标准化规范，来指导产品事件（一致性、效率、协同）
组件库的使用
引入组件库：
同时安装react>=16.8 react-dom>=16.8
npm i @arco-design/web-react
安装按需加载插件babel-plugin-import
yarn add babel-plugin-import -D 修改Babel配置，引入插件
主题定制
主题色修改：
通过css进行样式覆盖
修改less变量
组件精细化调整：button：带有投影效果 input：面性==> 线性
在使用less来书写样式，同名的变量，后面的会覆盖前面的
-会把可能需要变化的样式定义成样式变量，并告诉使用者相关的变量名
-提供.less类型的样式引入方式
Arco Pro：
预装环境： >npm i -g arco-cli
项目初始化： > arco init hello-arco-pro
项目开发：
cd hello-arco-pro yarn dev 使用Codemod代码迁移工具进行旧项目迁移
自定义组件：
-业务组件库搭建
1.架构设计
-单包架构：如果你选择把所有的组件看成一个整体，一起打包发布，这叫做单包架构。单个仓库，单个包，统一维护统一管理
-多包架构：多包架构的每个组件彼此独立，单独打包发布，单个仓库多个包，统一维护单独管理。
2.技术方案：
开发环境：
-打包速度
-实时预览：storybook
样式方案：
-less/sass ,css in js ,css
-组件库换肤，样式定制
产物构建：
-构建工具webpack ，rollup， vite， gulp
-产物格式：cjs，umd，es
质量保障：
-测试工具：jest，karma，mocha，enzyme，react-testing-library
-测试类型：单元测试，快照测试，截屏测试，e2e测试
组件开发
3.对外文档
文档部署：
-demo展示umijs
-静态内容：markdown
组件api生成：
-手写
-自动提取te-docuemnt
版本日志：
-手写
-自动提取：从PR提交记录自动提取@arco-design/changelog
什么是好的组件？
高内聚，低耦合：高内聚是指一个软件模块是由相关性很强的代码组成，只负责一项任务，也就是常说的单一责任原则。而低耦合是指一个完整的系统，模块与模块之间，尽可能的使其独立存在，减少不同功能或模块之间紧密关系。高内聚和低耦合可以保证服务的独立性以及系统的灵活度
通用性，易拓展
组件开发-组件组织的好与坏
1.语义化命名：组件的命名应当具有语义，并且避免与基础组件冲突，同一团队/仓库下的业务组件，也可采用相同的命名前缀
2.包名和组件名一致：NPM包名应当尽量与组件名保持一致，包含明确的使用场景信息
3.单独维护类型组件：推荐将需要对外导出的TS类型维护在单独的interface.ts中，并将其在index.ts中导出
组件开发-组件设计的好与坏
1.接口定义：在为组件定义接口类型时，应继承原生DOM(或基础组件)属性，避免属性遗漏或重复声明
2.类名前缀统一：组件使用特殊且统一的类名前缀，尽量降低与用户类名冲突的可能性
3.避免行内样式和css modules： 确保外部可通过类名进行样式覆盖
4.避免在js中直接引入样式文件： 应尽量保证逻辑与样式的分离，确保用户可以分别引入js和css文件，避免由于构建环境的不同导致的用户编译失败的问题
5.注意组件样式的按需加载： 在基于基础组件库如Arco进行业务组件的逻辑封装时，应注意按需引入所依赖的Arco基础组件的样式文件
