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 |
沒有 | 有 |