一、React 组件是什么？
组件，从概念上类似于 javascript 函数，他接受任意入参
（props），并返回作用于描述页面展示内容的 React 元素。
组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
1.创建一个组件
// 函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// class 组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
2.渲染组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
ReactDOM.render(
<Welcome />,
document.getElementById('root')
);
3.组件
React 的基础原则有三条，分别是：
- React 界面完全由数据驱动
- React 中一切都是组件
- props 是 React 组件之间通讯的基本方式
给组件输入一个参数，最终返回一个 React Element,React Element 就是在页面上展示的内容，相当于一个 DOM 节点
React 一大核心就是－－万物皆可组件
- 用户界面就是组件
- 组件可以嵌套包装组成复杂功能
- 组件可以用来实现副作用
一个复杂的界面可以分割很很多简单的组件，每个简单的组件又可以分割成很多小组件
有些类似于类和对象的概念
二、组件的划分
-
**无状态组件：**无状态组件 (Stateless Component) 是最基础的组件形式，由于没有状态的影响所以就是纯静态展示的作用。基本组成结构就是属性（props）加上一个渲染函数（render）。由于不涉及到状态的更新，所以这种组件的复用性也最强。例如在各 UI 库中开发的按钮、输入框、图标等等。
-
**有状态组件：**组件内部包含状态（state）且状态随着事件或者外部的消息而发生改变的时候，这就构成了有状态组件（Stateful Component）。有状态组件通常会带有生命周期 (lifecycle)，用以在不同的时刻触发状态的更新。在写业务逻辑时常用到，不同场景所用的状态和生命周期也会不同。
-
**容器组件：**为使组件的职责更加单一，耦合性进一步地降低，引入了容器组件 (Container Component) 的概念。重要负责对数据获取以及处理的逻辑。下文的设计模式也会提到。
-
高阶组件：“高阶组件（HoC）”也算是种组件设计模式。做为一个高阶组件，可以在原有组件的基础上，对其增加新的功能和行为。如打印日志，获取数据和校验数据等和展示无关的逻辑的时候，抽象出一个高阶组件，用以给基础的组件增加这些功能，减少公共的代码。
-
**Render Callback 组件：**组件模式是在组件中使用渲染回调的方式，将组件中的渲染逻辑委托给其子组件。也是种重用组件逻辑的方式，也叫 render props 模式。
三、设计原则
React 的组件其实是软件设计中的模块，其设计原则也需遵从通用的组件设计原则，简单说来，就是要减少组件之间的耦合性（Coupling)，让组件简单，这样才能让整体系统易于理解、易于维护。
即，设计原则：
- 接口小，props 数量少；
- 划分组件，充分利用组合（composition）；
- 把 state 往上层组件提取，让下层组件只需要实现为纯函数。
就像搭积木，复杂的应用和组件都是由简单的界面和组件组成的。划分组件也没有绝对的方法，选择在当下场景合适的方式划分，充分利用组合即可。实际编写代码也是逐步精进的过程，努力做到：
- 功能正常；
- 代码整洁；
- 高性能。