序

开始正式的工作的时候，我接触到了 react 及 antd ，没有一点点不适，可以说是一见如故。因为之前实习的时候用的都是 html+css+jquery ，样式简直要写到吐，react 实在是太好用啦！

这个时候公司的项目紧张，我接触之后就飞快地上手写业务了，这个时候，我只会用组件库，跟着前辈的代码照葫芦画瓢。只是换了一种形式写原生，对组件并没有多少概念，反而觉得自己是实战派，无论什么项目，我都能很快上手，可以说是相当自豪。

由于第一个公司加班太过严重，一年以后，我就辞职了，这个时候我只停留在应用阶段，没有深入思考过。

组件的认识及应用场景

第二家公司是一家很闲的外包，不可思议的是，我的项目是用原生写的。大部分时候都不太忙。写原生是在是太痛苦了，加上我又很闲，我开始思考一些问题。

> 为什么上个公司使用react, 而这个公司却使用原生？

我思考的结果是，有两个决定性因素。规模和样式。

第一家公司做的都是管理系统，功能多、表单多、开发人员多，antd 已经有大量的组件，对表单的各种处理也比较成熟，所以用 react 能够提高效率。而且管理系统对样式要求不高。

第二家公司则页面不多，但每个页面都经过了设计和交互的仔细推敲，而且单机操作居多。此时 antd 的组件库优势完全派不上用场。即使采用 react, 也并不会减少写样式的时间。

> 用原生怎么能够提高开发效率？

之前也痛苦，但是我并没有往深了思考。我思考之后，我发现，原生痛苦几个点在于：

• 以界面为单位划分产生了大量的重复代码

• 相同的设计元素不同的开发人员实现的方式不同

• 一个页面一份代码导致代码量过大，新增和修改都很不方便

• 获取和操控 dom 元素很麻烦

意识到这个问题后，我做了如下几点改变

• 先组件后页面，避免重复代码反复写

• 设定公共样式文件

• 设定公共方法文件

组件的应用场景

• 基于以上的经历，我后知后觉的才认真思考到为什么我们会从 jquery 转向 react，为什么这个框架会出现，组件这种思想到底带来了哪些变革。

• 其实它就很好的解决以上我所提到的问题。以组件为单位进行任务分配能够减少代码重复，减少模块与模块之间的相互依赖，修改的时候，不仅能够快速定位，还能够无感替换。同时，react 的书写方式使得 dom 操作转化为数据操作，极大的提高了开发效率。

• 由于组件的使用方式趋于一致，能够使团队开发的代码更加统一、规范、易于理解和阅读，便于维护与管理。

容器组件与展示组件

展示组件，在我的理解里，主要是为了避免写相似的、重复的样式。因此，它不涉及逻辑，主要用于展示。有时候设计图上的一些指定样式的 tag 和 box,我会封一些小小的展示组件。代码更加简洁，用起来也大方。

---

容器组件，我的理解是，为了避免写相似的数据处理。既然涉及数据处理，那就会有 state 出现。简单的例如一个可以关闭的弹框，那么点击 × 进行关闭，就是一个通用数据处理，可以写在组件内部。

受控组件与非受控组件的理解与应用场景

受控组件即 ：组件变更时，将值存入 state 中，组件展示的值，从 state 里读取。假设有一个输入框，我们希望打造一个只能输入数字的效果，那么当输入字符时，我们可以不更新对应 state 中的内容。这样展示的内容也不会变更，达到一个只能输入数字的效果。

非受控组件即：输入即展示，只能拿到最终的结果。

例如：

antd 中的 Input ， 当传入 value 时，是受控组件。展示以 value 值为准。不传入 value 时，onchange 可以拿到当前的输入内容。

那到底什么时候写受控组件，什么时候写非受控组件呢？

我的判断准则是： 该组件是否涉及编辑场景。

如果该组件只用于新增的场景中，此时拿到最终结果即可，使用非受控组件。

如果该组件需要新增和编辑，那么使用受控组件，编辑时将值传入 value 即可，非常方便。

这个组件我写成了受控组件，涉及编辑场景。

一般来说，受控组件是不需使用 state 来存储数据的，将结果实时传出即可。但是，当组件内部涉及同级选项时，则需要使用 内部 state，控制 单个选项的展示，将最终选择结果传出。

该组件是受控组件，但依然存在内部 state。

高阶组件的认识与理解

高阶组件目前我在项目中的使用非常少。一开始我不大习惯和理解它的书写方式，后来看了程墨大佬的书，突然悟了。

说说我的理解吧。

以书中样例为例：

传入的函数再处理我一直不大能理解。我现在是这么理解的，这个传入的 Component 可以看作是将传入的组件，重新命名为了 component。平时我们写组件或者引用组件时，也会使用别名。在这个地方，component 就是它的别名。

而我们要做的事，是在已经有的组件上添加样式 、传入参数或者处理一些其他的基本逻辑。

以组件为单位，抽离相似的逻辑，提高代码的复用。

结语

以上是我一点小小的认知，感觉认识到这些以后，我对于组件的应用和设计更加的得心应手了。 希望能对你有所帮助~