前端可视化项目

数据报表项目

组件的封装

5-8 扩展知识：前端组件化设计原则
扩展知识：前端组件化设计原则

什么是前端组件化

前端组件化是一种编程思想，是一种拆分代码的方式。随着前端项目复杂度越来越高，组件化已经成为一种共识，它一方面提高了开发效率，另一方面降低了维护成本。但在前端领域，并没有很通用的组件模式（注意 Chrome 已经支持 Web Component API，入门可以查看：http://www.ruanyifeng.com/blog/2019/08/web_components.html），因为缺少一个大家都能认同的实现方式，所以很多框架 / 库都实现了自己的组件化方式。

大厂前端组件化实践

大厂目前对前端组件的理解是分层，针对不同的需求将组件分为不同的种类，这种分类是一种规范，而不是规定。基本上我们可以将组件分为四类：

基础组件：

用于构建页面的原子组件，如 Button、Input、Select、Form 等等，这类组件通常用于取代 HTML 的原生组件，不仅可以实现基本功能，更重要的是可以支持各种样式定制、事件绑定和换肤等等，基础组件库里比较著名的是 AntDesign 和 ElementUI，可以毫不夸张的说现在的前端项目没有不使用基础组件库的；

业务组件：

基于基础组件构建出的一些更复杂的、可重用的组件，比如二维码组件、搜索框组件等等，这些组件都有很强的业务特征，并且需要通过基础组件进行组装，但是项目中又会频繁出现，对于这类组件，通常可以单独发布一个 npm 包，方便不同项目间进行重复使用。

区块：由业务组件构成的更复杂的组件，用于构建页面的某个功能，比如表格区块，会包含：查询条件、表格和翻页器

模块：由区块构成的整个页面，用于快速构建整个页面

大家可以在阿里前端团队出品的 Fusion 中看看阿里都生产了哪些组件：https://fusion.design/mc/list

组件设计原则

一个组件的复杂度，主要来源就是自身的状态；即组件自身需要维护多少个不依赖于外部输入的状态。

组件开发中，如何将数据和 UI 解耦，是最重要的工作。组件开发过程中，时刻谨记、思考是否符合以下的原则，可以帮助你开发一个更完善的通用组件。

单一职责
你的组件是否符合只实现一个职责，并且只有一个改变状态的理由？如：fetch 请求和渲染逻辑，应该分离。因为 fetch 请求时会造成组件重新渲染，渲染时的样式或数据格式变化，也会引起组件重新渲染。

单一职责可以保证组件是最细的粒度，且有利于复用。但太细的粒度有时又会造成组件的碎片化。

单一职责组件要建立在可复用的基础上，对于不可复用的单一职责组件，我们仅仅作为独立组件的内部组件即可。

通用性
组件开发要服务于业务，为了更好的复用，又要从业务中抽离。

复用一个组件时，即复用其职责，所以只有单一职责的组件，是最便于复用的

当一个组件错误地有多个职责时，就会增加复用时的开销。

尽量避免代码重复，重复两次及以上的代码，考虑一下是否可以复用？

通用性虽好，但会浪费开发者很多精力，因此在抽象业务组件之前，请问自己：

存在代码重复吗？如果只使用一次，或者只是某个特定用例，可能嵌入组件中更好。

如果它只是几行代码，分隔它反而需要更多的代码，那是否可以直接嵌入组件中？

性能会收到影响吗？更改 state/props 会导致重新渲染，当发生这种情况时，你需要的是 只是重新去渲染经过 diff 之后得到的相关元素节点。在较大的、关联很紧密的组件中，你可能会发现状态更改会导致在不需要它的许多地方重新呈现，这时应用的性能就可能会开始受到影响。

你是否有一个明确的理由？分离代码我想要实现什么？更松散的耦合、可以被复用等，如果回答不了这个问题，那最好先不要从组件中抽离。

这些好处是否超过了成本？分离代码需要花费一定的时间和精力，我们要在业务中去衡量，有所取舍。

封装
良好的组件封装应该隐藏内部细节和实现意义，并通过 props 来控制行为和输出。
减少访问全局变量：因为它们打破了封装，创造了不可预测的行为，并且使测试变得困难。可以将全局变量作为组件的 props，而不是直接引用。
组合
具有多个功能的组件，应该转换为多个小组件。
单一责任原则描述了如何将需求拆分为组件，封装描述了如何组织这些组件，组合描述了如何将整个系统粘合在一起。
纯组件和非纯组件
非纯组件有显示的副作用，我们要尽量隔离非纯代码。

将全局变量作为 props 传递给组件，而非将其注入到组件的作用域中。

将网络请求和组件渲染分离，只将数据传递给组件，保证组件职责的单一性，也能将非纯代码从组件中隔离。

可测试
测试不仅仅是自动检测错误，更是检测组件的逻辑。
如果一个组件测试不易于测试，很大可能是你的组件设计存在问题。
富有意义
开发人员大部分时间都在阅读和理解代码，而不是实际编写代码。
有意义的函数、变量命名，可以让代码具有良好的可读性

组件

1、基础组件和业务组件的区别是什么？
2、业务组件库的实践。
3、业务组件的抽象标准和复用逻辑。