组件开发的认识

组件开发

概念：

​

网上的组件化概念：

1. 组件就是将一段UI（用户界面）样式和其对应的功能作为独立的整体去看待，无论这个整体放在哪里去使用，它都具有一样的功能和样式，从而实现复用，这种整体化的细想就是组件化。不难看出，组件化设计就是为了增加复用性，灵活性，提高系统设计，从而提高开发效率。
2. Component，中文称为组件，或者构件。使用非常比较广泛，它的核心意义在于复用，相对模块，对于依赖性有更高的要求。

自己的理解：

• 组件相当于一个函数，这个函数要实现某种功能。一个网页可以看做为一个大组件，这个大组件下面又分为很多小组件，组件与组件之间可以相互调用，组件在调用的时候应该先声明组件，告诉编译器需要调用的组件在哪个位置，哪个文件下。

• 组件开发的优点：

  1. 易于维护：它很像C++中的封装，组件的实现可以便于整体代码的维护，当代码量足够多的时候，组件的好处就会体现出来，它的功能是固定的，当需要改动功能中的一个小问题的时候，我们只需要找到我们定义组件的地方进行改动，那么全局中调用的组件功能都会发生改变。
  2. 复用性好：当我们定义好一个组件的功能，我们就可以反复调用这个组件，以方便我们进行编程，我感觉我们用的VScode 、VS2019等等软件，都是封装好组件的大组件，我们在里面编写代码时调用的函数都是在调用已经给我们封装好的组件。
  3. 提高开发效率：当我们进行开发的时候，我们会调用已经建立好的组件，从而减少我们重复编程的时间。

• 组件的设计：

  1. 功能足够专一：我们设计组件的时候尽量把组件的功能设定的足够明确，不能既实现这个功能又实现那个功能。当然如果我们的组件可以分为多个功能点的话，那么尽量把每个功能点也封装成一个组件，但在设计组件的时候要注意大组件内的功能和逻辑合理。

  2. 接口控制：我们在设计组件的时候，要明确组件的输入接口和输出接口。*输入接口：*顾名思义是我们要往组件里输入的数据，这个数据可以是字符、数字、和字符串，简单来说就是数据的类型。*输出接口：*我们要通过这个组件输出什么类型的数据。

  3. 灵活性：我们设计一个组件的时候，要给调用者足够的权限。一个组件在实现某些默认的内容外，还要进行一些动态的配置，这些动态配置可以是文本、图片、按钮的实现，我们可以把文本的内容和颜色，图片的位置和规则，按钮的事件和外形都可以做成可供调用者自行配置的。

  4. 参数值校验：

     • 值属性：当组件内需要一个固定数据类型数据的时候，我们就要进行对传递过来的参数值进行校验，如果传递过来的值不符合固定的数据类型，组件要进行异常抛出，并给出提示。
     • 属性值的必要性：组件内有的属性是不能缺少的，在组件初始化的时候要进行属性值是否被传递过来的检查，当组件内必不可缺的属性值没有被传递过来时，抛出异常，并给出提示。如果属性值在组件内不重要，那么可以在组件内给出默认值，当属性值没有被确定的时候，就使用默认值。

  5. 组件的生命周期：任何组件都是有生命周期的，我们不可能设计一个永远都不结束的组件，那是死循环。那么在设计组件的时候要明确组件在不同的周期内做了什么事情。一般一个组件的生命周期可以分为三个阶段：初始化阶段、组件内事件变化阶段、组件销毁阶段，每个阶段组件都有特定的活动。

     *初始化阶段：*读取参数值、校验参数值、进行参数初始化处理。

     *事件变化阶段：*对属性值进行操作、实现属性值的特定功能以达到某种效果

     *销毁阶段：*传出属性值、结束自身、清除系统进程、清理自身对系统的负面影响。

  6. 组件逻辑：我们在设计组件的时候，有时候一个组件的实现要用到好几个其他的组件，这时候就要弄好组件之间的逻辑关系，我们规定要实现的组件为父组件，用的的其他组件为子组件，这样组件与组件之间的属性值传递的时候就有了逻辑关系，从而使代码的逻辑清晰，简单明了。

  7. 事件传递：当我们在子组件中发生了某种事件，需要对父组件进行影响时，就需要对事件进行传递。

     • Vue中的事件传递

       Vue中事件传递的实现需要在子组件中使用 this.$emit(‘事件’)，向父组件传递一个事件，在父组件中监听这个“事件”，并给出对应的逻辑处理就行。

     • React中的事件传递

       React中事件传递的实现需要在父组件中定义一个函数，在子组件中调用这个函数，子组件中发生某种事件，返回真值到父组件中，然后父组件接受这个真值，并给出对应的逻辑处理。