关于javascript:React系列四认识组件化开发

快来退出咱们吧！

“ 小和山的菜鸟们 ”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (https://xhs-rookies.com/) 进行学习，及时获取最新文章。

“Code tailor”，如果您对咱们文章感兴趣、或是想提一些倡议，微信关注 “小和山的菜鸟们” 公众号，与咱们取的分割，您也能够在微信上观看咱们的文章。每一个倡议或是同意都是对咱们极大的激励！

前言

这节咱们将介绍前端组件化的思维，以及 React 中的组件化思维。

本文会向你介绍以下内容：

• 什么组件化？
• 为什么须要组件化？
• React 的组件化
• 组件化开发的长处
• 怎么设计一个组件？

什么是组件化？

组件化是一种开发思维，是一种开发思路上的解决方案，如果一个开发人员，没有很深刻的了解组件化这个概念的话，会有一种对组件含糊的感觉，会有一种想用组件化来实现，却下不了手的感觉。只有记住，组件化只是一种思维，不是一种具体的解决方案。

咱们在面对简单问题的时候，常常会应用一种思考形式

• 将问题一步步的划分细化，分解成许多可解决的小问题
• 而后一个个的解决
• 而后放回整体中，问题就解决了

其实下面的这种思维就是分而治之：

• 分而治之是一种重要思维，是简单零碎开发和保护的基石
• 前端目前的组件化开发都是基于分而治之的思维

组件化也是与分而治之相似的思维：

• 如果咱们将页面逻辑全副放在同一个页面中，解决起来将会非常复杂，不利于前期的治理拓展和保护。
• 如果咱们将页面逻辑拆分成一个个小的功能块，每个功能块实现本人这部分独立的性能，而后整合成一个页面，那么之后整个页面的治理和保护就变得非常容易了。

如这张图所示，咱们能够将其分为，顶部和上面的 list，list 中又能够持续分出一些组件，这会让咱们的开发更加不便，复用率高。

组件化的思维来思考整个应用程序：

• 将一个应用程序分成许多页面
• 将一个页面分成很多个组件
• 每个组件都用于实现页面的一个功能块
• 每个组件还能够细分成其余更小的组件
• 组件自身又能够在别的中央复用

为什么须要组件化？

有时候咱们会遇到一些场景，比方：

• 页面逻辑越来越多，代码量越来越多，写到前面很难晓得所有的逻辑，很容易一改就是一大片
• 本人页面好好的忽然呈现问题，后果是他人代码的影响
• 同样的逻辑在多个中央反复书写，每次都须要改一堆文件

而组件化的呈现就是为了解决这些起因。

• 我的项目复杂度减少，一个页面一个文件须要解决的内容过多
• 反复度太高，批改起来繁琐，效率低
• 代码品质差，可控度太低。

React 的组件化

组件化是 React 的核心思想，咱们封装的 App 自身就是一个组件：

• 组件化提供了一种形象形式，让咱们能够应用一个个独立的小组件来组合构建文化的利用
• 任何的利用都会被形象成一颗组件树

组件化思维的利用：

• 在软件开发中，应用组件化思维
• 尽可能的将页面拆分成一个个小的组件，并且尽量让这些组件是能够失去复用的。

React 的组件依照不同的形式能够分成很多类组件：

• 依据组件的定义形式：函数组件和类组件；
• 依据组件外部是否有状态须要保护：无状态组件和有状态组件；
• 依据组件的不同职责：展现型组件和容器型组件；

这些概念有很多重叠，然而他们最次要是关注 数据逻辑和 UI 展现的拆散 ：

• 函数组件、无状态组件、展现型组件次要关注 UI 的展现；
• 类组件、有状态组件、容器型组件次要关注数据逻辑；

那么组件化开发长处有什么呢？

组件化开发的两个重要长处，让前端工程化以及升高代码的保护难度。

• 升高了零碎各个性能之间的耦合性
• 进步了性能外部的聚合性。
• 最小化了重绘（diff 算法）
• 防止了不必要的 dom 操作
• 后果可预测

耦合性的升高，进步了零碎的舒展性，升高了开发复杂度，晋升开发效率，升高开发成本。

怎么设计一个组件？

专一

设计组件要遵循一个准则： 一个组件只专一做一件事，且把这件事做好 。

一个性能如果能够拆分成多个性能点，那就能够将每个性能点封装成一个组件。

值得注意的是，并不是组件拆分的越小越好，如果组件拆分的很小且复用性不高，那也是不可取的。只须要将一个组件内的性能和逻辑管制在一个可控的范畴内就能够了。

可配置性

设计组件，要明确它的可配置性，也就是明确它的输出和输入别离是什么。

组件除了要展现默认的内容，还须要做一些动静的适配。比方，组件中有文字内容，须要动静批改，依据内部传值。

要做可配置性，最根本的形式是通过属性向组件传递配置的值，而在组件初始化的申明周期内，通过读取属性的值做出对应的显示批改。还有一些办法，通过调用组件裸露进去的函数，向函数传递无效的值；批改全局 CSS 款式；向组件传递特定事件，并在组件内监听该事件来执行函数等。

可复用性

封装一个组件的一个关键点，就是它的复用性。

如果只是在单页面中应用的话，并没有肯定要将其封装进来，如果所有的组件都细分且封装进来，会让程序的可读性升高。

组件的形容分为两个局部：组件阐明和组件实现。任何可重用组件都必须要有特色阐明 (重用组件的类型信息) 和规定阐明 (组件的动静行为)，别离形容重用组件的动态特色和动静语义。另外，在形容重用组件的信息中还应包含组件接口信息，例如组件是客户组件还是服务者组件。一个组件能够有多个“提供”接口和“要求”接口。

下节预报

本节咱们介绍了 React 组件化的思维，在下一个章节咱们就开始学习创立应用 React 组件，敬请期待！