1、React组件化概念
1.1、组件的概念
React 应用都是构建在组件之上。
组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。
1.2、组件的特点
组件化的概念在后端早已存在多年，只不过近几年随着前端的发展，这个概念在前端开始被频繁提及，特别是在MV*的框架中。
前端中的“组件化”这个词，在UI这一层通常指“标签化”，也就是把大块的业务界面，拆分成若干小块，然后进行组装。
狭义的组件化一般是指标签化，也就是以自定义标签（自定义属性）为核心的机制。
广义的组件化包括对数据逻辑层业务梳理，形成不同层级的能力封装。
-
标准性
任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
-
组合性
组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。
-
重用性
任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。
-
可维护性
任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。
2、自定义组件
2.1、函数组件
无状态函数式组件形式上表现为一个只带有一个 render() 方法的组件类，通过函数形式或者 ES6 箭头 function的形式在创建，并且该组件是无state状态的。具体的创建形式如下
import React from 'react';
//定义一个React组件
function App() {
return (
<div>
hello React...
</div>
);
}
export default App;
2.2、class组件
React.Component 是以 ES6 的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，形式改为 React.Component 形式如下
import React from 'react';
//定义一个React组件
class App extends React.Component{
render(){
return (
<div>
Hello，Reactjs！！
</div>
);
}
}
export default App;
在其他文件中引用组件
import React from 'react';
import ReactDOM from 'react-dom';
//App组件，组件要求大写字母开头
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
2.3、函数组件和class组件的区别
用构造函数创建出来的组件，叫做“无状态组件”；
用class关键字创建出来的组件，叫做“有状态组件”；
有状态组件和无状态组件之间的本质区别是有无state属性。
注意：
使用
class关键字创建的组件，有自己的私有数据（this.state）和生命周期函数；使用
function创建的组件，只有props，没有自己的私有数据和生命周期函数；
函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件
| 区别 | 函数组件 | class组件 |
|---|---|---|
是否有 this |
没有 | 有 |
| 是否有生命周期 | 没有 | 有 |
是否有状态 state |
没有 | 有 |