组件化
组件
1、分而治之是软件工程的重要思想，是复杂系统开发和维护的基石；
2、而前端目前的模块化和组件化都是基于分而治之的思想；
什么是组件化开发
一个页面中所有的处理逻辑全放一起，处理起来变得复杂，不利于后续的管理和扩展
将页面拆分成一一个个小的功能模块，每个功能块完成属于自己这部分独立的功能，之后整个页面的管理和维护就变得非常容易了
组件化思想：
1、完整的页面分成很多个组件
2、每个组件都用于实现页面的一个功能块
3、每个组件又可以进行细分
4、组件本身又可以在多个地方进行复用
封装思路
面向对象思想
规范标准组件准则：
基本的封装性
简单的生命周期呈现
明确的数据流动
web component
四个组成部分：
HTML Templates 定义模板
Custom Elements 定义组件展示形式
Shadow DOM 定义组件的作用域范围、可以囊括样式
HTML Imports 提出新的引入方式
组件类型
React 组件基本由三个部分组成：属性 Props、状态 State 和生命周期钩子函数
组件类型：
1、无状态组件
2、有状态组件
3、容器组件
4、高阶组件
5、渲染回调组件
无状态组件
纯静态展示的作用
基本结构就是属性 props 加上渲染函数 render
由于不涉及到状态的更新，所以这种组件的复用性也最强
特点：
只负责接收 props，渲染 DOM
没有 state
不能访问生命周期方法
不需要声明类：可以避免 extends 或 constructor 之类的代码，语法上更加简洁
不会被实例化：因此不能直接传入 ref
不需要显示声明 this 关键字
更好的性能表现
有状态组件
在无状态组件的基础上，如果组件内部包含状态 state 且状态随着事件或外部的消息而发生改变的时候，就构成了有状态组件
有状态组件通常会带有生命周期（Lifecycle），用以在不同的时刻触发状态的更新
容器组件
在具体的项目实践中，我们通常的前端数据都是通过 Ajax 请求获取的，而且获取的后端数据也需要进一步的做处理。为了使组件的职责更加单一，引入了容器组件（Container Component）的概念。我们将数据获取以及处理的逻辑放在容器组件中，使得组件的耦合性进一步地降低
高阶组件
当面对复杂的需求的时候，我们往往可以利用高阶组件（Higher-Order Component）编写出可重用性更强的组件。那么什么是高阶组件呢？其实它和高阶函数的概念类似，就是一个会返回组件的组件。或者更确切地说，它其实是一个会返回组件的函数。
渲染回调组件
在组件中使用渲染回调的方式，将组件中的渲染逻辑委托给其子组件
二次封装组件库
自定义
主题色、更改按钮样式、自定义图标、自定义table组件等等
为什么需要二次封装
1、统一风格：通过二次封装，可以定义统一的样式和行为，减少不一致性
2、降低维护成本：底层的组件库更新时，需要在项目的多个地方进行修改。如果有了自己的封装，只需要在封装层面进行更新即可，大大降低维护成本
3、增加定制功能：在原有组件库的基础上增加一些特定的功能，如特定的验证，错误处理等。二次封装提供了这样的可能。
4、提高开发效率：在一些常用的功能（如表单验证、全局提示等）上，二次封装可以提供更方便的 API，提高开发效率。
参考
https://tsejx.github.io/react-guidebook/foundation/main-concepts/component/