3、组件化思维：组件化开发的优势、组件分类与设计原则
做可视化大屏这几年，我越来越觉得——组件化不是一种选择，而是一种必然。
刚开始带团队那会儿，我们接了一个智慧城市的大屏项目。需求方今天说要改个图表颜色，明天要加个数据卡片，后天又要换布局。如果每个页面都是手写一套代码，那改起来简直要命。后来我痛下决心，把所有UI拆成组件。嗯，从那以后，迭代速度直接翻倍。
说白了，组件化就是让你写一次，用多次。你想想看，大屏里那些图表、标题、数据卡片，长得都差不多吧？把它们抽出来，就是组件。
3.1 组件化开发的优势
我总结了一下，组件化带来的好处，主要有这几点：
- 复用性：一个图表组件，可以在10个大屏里反复用。改一处，处处生效。
- 可维护性：每个组件只管自己的事。出问题了，定位到那个文件就行，不用翻遍整个项目。
- 协作效率：团队里A负责图表组件，B负责数据卡片，C负责布局容器。互不干扰，并行开发。
- 一致性：所有大屏用同一套组件，视觉风格统一。不会出现这个屏用圆角，那个屏用直角的情况。
- 测试方便：组件独立，可以单独写单元测试。我在项目中遇到过，一个图表组件测好了，后面所有用到它的页面都不用再测。
核心观点：组件化的本质，是把「页面开发」变成「组件组装」。你不再是写页面，而是在搭积木。
3.2 组件分类
做组件化，第一步就是分类。我个人习惯把组件分成三类：基础组件、业务组件、容器组件。
为什么要分？因为不同组件的职责不同，抽象程度也不同。混在一起，容易乱。
3.2.1 基础组件
基础组件，也叫原子组件。它们是最小的UI单元，不包含任何业务逻辑。
举个例子：
- 按钮（Button）
- 输入框（Input）
- 标题（Title）
- 图标（Icon）
- 标签（Tag）
这些组件的特点是：纯展示，无状态。你给它什么数据，它就显示什么。不关心数据从哪里来，也不关心点击后要做什么。
我的建议：基础组件尽量做得「笨」一点。不要加太多配置项，保持简单。我在早期犯过错误，把一个按钮组件搞了20多个props，结果团队里没人愿意用。
3.2.2 业务组件
业务组件，就是跟具体业务绑定的组件。它们通常由多个基础组件组合而成，并且包含业务逻辑。
比如：
- 数据卡片（展示某个指标的最新值、趋势、同比）
- 图表组件（折线图、柱状图、饼图，带数据请求和交互）
- 告警列表（展示告警信息，支持筛选和排序）
- 地图组件（展示地理数据，支持缩放和点击）
业务组件的特点是：有数据源，有交互逻辑。它们知道要去哪里拿数据，也知道用户点击后要做什么。
我记得有一次，一个业务组件里混入了布局代码。结果换了个大屏，布局变了，组件就废了。后来我规定：业务组件只管数据和交互，不管位置和大小。
3.2.3 容器组件
容器组件，就是负责布局和排版的组件。它们不关心具体内容，只关心内容怎么放。
常见的容器组件：
- 栅格布局（Grid）
- 弹性布局（Flex）
- 卡片容器（Card）
- 弹窗（Modal）
- 标签页（Tabs）
容器组件的特点是：只负责结构，不负责内容。它们像一个个盒子，你把业务组件放进去，它们负责排列好。
注意：千万不要在容器组件里写业务逻辑。我曾经见过一个同事，在Grid组件里直接调接口拿数据。结果换了个页面，Grid组件就不能用了。容器组件，就该老老实实做容器。
3.3 组件设计原则
做组件设计，我给自己定了几个原则。这些年一直用，效果不错。
3.3.1 单一职责
一个组件只做一件事。如果它既展示数据，又处理布局，还负责动画，那它就该拆了。
怎么判断？很简单：如果这个组件有超过3个「或」的逻辑，就该拆。比如「如果是移动端就显示小图，如果是PC端就显示大图，如果是平板就显示中图」——这种就该拆成三个组件。
3.3.2 接口最小化
组件的props越少越好。能通过默认值解决的，就不要让使用者传。
我见过最夸张的组件，有40多个props。说实话，没人能记住。我的经验是：基础组件不超过10个props，业务组件不超过15个。超过这个数，就该考虑拆分了。
3.3.3 高内聚低耦合
组件内部要高度相关（高内聚），组件之间要尽量独立（低耦合）。
说白了就是：组件内部的东西，不要暴露给外面；外面的东西，也不要影响组件内部。
举个例子：一个图表组件，它内部怎么渲染、怎么动画，外面不需要知道。外面只需要告诉它「数据是什么」「颜色是什么」就够了。
3.3.4 可配置性
组件要提供足够的配置项，让使用者能调整样式和行为。但配置项要有合理的默认值。
我习惯的做法是：80%的场景用默认值就能搞定，20%的特殊场景通过配置项调整。这样既简单，又灵活。
避坑指南：我曾经把一个图表组件的颜色写死了。结果客户说「我要蓝色主题」，我改了一个地方。后来客户又说「我要绿色主题」，我又改了一个地方。再后来，客户说「我要根据数据自动变色」……嗯，从那以后，所有颜色我都做成可配置的。
3.3.5 文档先行
写组件之前，先写文档。文档里写清楚：这个组件是干什么的、有哪些props、每个props的类型和默认值是什么、有什么注意事项。
为什么？因为文档写清楚了，代码才不会跑偏。而且文档也是给团队其他人看的，大家达成共识，才能高效协作。
3.4 总结
组件化思维，说白了就是把大问题拆成小问题，把小问题做成可复用的模块。
基础组件负责展示，业务组件负责逻辑，容器组件负责布局。各司其职，互不干扰。
设计组件时，记住五个原则：单一职责、接口最小化、高内聚低耦合、可配置性、文档先行。
你想想看，如果每个大屏项目都从零开始写代码，那得累死。但如果你有一套成熟的组件库，那做新项目就像搭积木一样简单。
下一章，我会带你手把手设计一个基础组件——数据卡片。从设计稿到代码，一步步拆解给你看。