《深入React技术栈》个人总结之1.3React组件（打卡二）

第一章第三小节：React组件

今天学习了组件的发展历史，以及组件的定义，react组件的定义。

1.3.1  组件的演变

• 狭义上的组件（UI组件），比如Tabs组件。组件主要围绕在交互动作上的抽象，针对这些交互动作，利用javascript操作DOM结构或style样式来控制。（UI组件一定会有3部分组件：结构、样式和交互行为，分别对应着HTML、CSS、javascript。）
• 广义上的组件也可以叫逻辑组件，即带有业务含义和数据的UI组件的结合。这类组件不仅有交互动作，更重要的是有数据于界面的交互。

标准组件的几大规范：

1. 简单的封装性
2. 简单的生命周期呈现
3. 明确的数据流动

Web Components

由四部分组成

• HTML Templates 定义了之前模版的概念
• Custom Elements定义了组件的展示形式
• Shadow DOM 定义了组件的作用域范围、可以囊括样式
• HTML Imports提出的引入方式

下面是表示图（红色字是本人的理解   有误欢迎指出）

1.3.2React组件的构建

组件元素被描述为纯粹的JSON对象，（这里我理解为虚拟DOM，一个javascript对象树，又像是AST 语法树，看作一个JSON对象）。

React组件基本上由属性（props）、状态（state）以及生命周期函数。（React组件可以接收参数，也可能有自身的状态）

1.React与Web Components的区别：

从React组件上看，他与Web Components传达的理念是一致的，但是两者实现的方式不同：

1. React自定义元素是库自己构建的，与Web Components 规范并不通用
2. React渲染过程包含了模版的概念（这里我提一下关于vue的，vue组件的话有个大标签<template>...</template>,而React渲染的时候也是规定了最外层套一个盒子及render(<div>...</div>)）
3. React组件的实现均在方法与类中，因此可以做到相互隔离，但是不包括样式
4. React引用方式遵循ES6标准

2.React组件的构建方法

React组件基本上是由组件的构建方式、组件内的属性状态与生命周期方法组成的。

React组件的构建方法有三种

• React.createClass
• ES6 classes
• 无状态函数（stateless function）

总的来说，现在的开发是把一个页面拆分成合理的粒度（组件），在用这些组件组合成我们的页面，从而提升组件的复用化，代码的精简话，完成性能上的优化等