在上一篇博客中，我們有提到，React 中的核心就是組件，那麼這一篇博客，就讓我們來了解下組件：
首先，所有的 React 組件都是以 class 的形式來寫的：
這樣，我們就定義了一個組件 Cmp1。
但是我們現在要寫的是 React 組件，而並不是一個普通的 class，那麼它一定有一些組件所特有的一些功能。
比如，React 組件裏面有狀態，有事件，有屬性等等，所以我們這個 class 不能從零開始，去寫一個空的 class。
那麼我們就需要繼承自 React 裏面的 Component 。
實際上，所有的 React 組件都是繼承自 React.Component，而 Component 它裏面帶了很多組件所公有的一些東西，比如渲染，接收參數，生命週期等等。
並且所有的 class 都得有 constructor，然後我們需要做的很簡單，就是把各種各樣的參數，給接收起來，然後統一的丟給父級，來完成初始化的工作。
如果你已經看過 React 的官方文檔，在這裏可能會有個疑問：官方寫組件的時候，一般都是傳的 props：
那麼這兩種寫法有什麼不一樣嗎？
首先，我們需要知道一點，就是正經的 React 組件它其實就只接收一個參數 props。
那麼這裏用 ...args 的寫法，肯定也是能兼容的，因爲這種寫法是有多少參數，就接收多少參數。
那爲什麼要這樣寫呢？
我們現在是通過直接繼承 Component 來寫組件，那 ...args 和 props 其實並沒有什麼本質上的區別。
但是我們要考慮到一個擴展的問題：就是將來我們其實是要，從組件上再來繼承組件的。
那麼一旦到了這個時候，其實我們就有可能會多出一些參數來。
那麼在這種情況下，我們用 props 就會顯得不方便了。
然後，接下來，我們還需要一個東西 render。
因爲對於 React 來說，它認爲所有的組件，都應該能顯示在頁面當中，那這時候自然也就需要一個渲染的動作。
那麼肯定有人會說，我這個組件它只是用於和服務器通信，它並不需要在頁面上顯示什麼東西。
那如果是這樣的話，可能就不適合寫成組件了，說的直白一點，它不適合寫成 Component。因爲 Component 就是在頁面當中，比如按鈕，表格等等這一類的東西。
如果你真的是一個只在內存當中去做一些事，而並不需要顯示。那麼其實你更適合用普通的 class，而沒有必要去繼承 React.Component。
反正一句話，所有的 React 組件，都必須得有 render 渲染這個方法。
而渲染裏面就直接的去 return 你要的代碼：
這樣，我們就已經寫完了一個最基本的組件，接下來我們怎麼去用它呢？
因爲 Cmp1 沒有子組件，所以我們把它寫成單標籤 <Cmp1/> 是沒問題的。
萬一有子組件的話，那我們就在它裏面接着寫 <Cmp1></Cmp1>。
在 React 裏面，組件既可以寫成單標籤，也可以寫成雙標籤，取決於你內部有沒有內容。
然後我們再來看下模板，簡單來說就是花括號 { }。
花括號 { } 在 React 裏面，代表輸出。
比如，我期望輸出一個變量 a 的值：
那如果不是變量，而是定義的屬性呢？
所以，在花括號 { } 裏面，只要是符合 jsx 語法的東西，都可以。（也就是 js 語法）
如果我們需要動態的給一張圖片添加 src 地址呢？
可以看到，是讀不出來的，如果這裏用雙引號去寫的話，它其實就是個字符串。
而我們希望的是一個變量，所以這裏也需要用到花括號 { }。
所以花括號 { } 既可以往內容裏面直接輸出，也可以往標籤的屬性上面輸出。
平時我們在用 React 的時候，render 函數是要 return 一個東西的。
這裏需要注意一下：在 js 裏面， return 是有問題的。
我們一起來看幾個例子就明白了：
左邊的例子，相信大家都沒問題。
右邊的例子，換個行，返回值就是 undefined 了。
這裏需要注意的是，在 js 裏面， return 是不能換行的。
那其他地方，變量聲明賦值的換行有影響嗎？
可以看到，變量聲明賦值的換行是沒有影響的。
那邏輯的換行呢？
可以看到，即使我們隨便換行，換的亂七八糟，依舊是沒問題的。
實際上來說，語法層面對換行來說，是沒要求的。就唯獨一個東西，就是 return。
return 後面不能換行，換行它就認爲你要返回一個空，也就是 undefined。
所以 js 裏面的 reutrn 有問題，不能換行。
其實我們平時寫 React，在 render 裏面寫 return 的時候，一個不小心，就會寫成這樣：
這樣是出不來的，你可以看到頁面顯示是空白的，並且控制檯報了一對錯，說你的 render 沒返回東西。
基本每一個用 React 的人都在這裏踩過坑，因爲不換行 html 代碼寫起來和看起來會比較難受。
那有什麼辦法可以換着行來寫嗎？
我們可以加一個括號 ( )，因爲加括號和不加括號，其實語法層面上是沒有區別的。
可以看到，這樣是能出來的。加個括號 ( ) 代碼既好看，而且又符合它不換行的要求。
所以，React 裏面的組件怎麼寫其實很簡單，我們只需要注意下面幾件事就可以了：
1，所有的組件，必須得繼承自 React.Component。
2，所有的組件，必須有 constructor 且 super 父級，否則狀態 state 等功能無法使用。
3，組件必須要有 render() 方法，並且 return 需要注意換行的問題（加個括號可以解決）
4，組件名，也就是 class 類名首字母必須大寫，小寫會報錯。（簡單來說它會認爲：如果你是小寫標籤，那麼你應該是個 HTML 標籤）
5，組件使用的時候，單雙標籤都可以。（雙標籤閉合、單標籤結尾加 / ）
組件會寫了，那怎麼給組件傳值呢？
實際上組件這個東西，如果它一切都是寫死定好的，那這個時候，其實它的應用是受到極大的限制的。
所以我們需要能夠往它裏面傳東西，比如現在我們往 Cmp1 組件身上傳一個 abc 屬性，它的值是 xyz。
那麼在組件內部，我們如何獲取屬性身上的東西？
我們需要用到 props。
props 就是 properties 的簡稱，就是屬性的意思。
你可以理解爲，props 就是一個 json，你給一個組件傳的所有屬性，React 都會往這個 json 身上放。
所以我們用的時候，只需要 this.props.xxx 就可以了。
最後，在 React 裏面有一個地方比較特殊，就是我們平常在寫 html 的時候，有些時候是需要用到 style 的。
那麼 React 裏面的 style 這麼寫，讓我們一起來看看：
可以看到，我們以前的寫法是出不來的。
還報了一堆錯，它大概的意思就是說 style 這個屬性，它期待着一個 mapping，而不能是字符串。
mapping 其實就是映射，說白了就是 json。
不知道大家平常寫 css 的時候，有沒有注意到：樣式其實就有點類似於 json。
.box {
width: 200px;
height: 200px;
color: red;
}
/* .box 的值不就是 { ... } 這樣一個 json 嗎？ */
而現在再 React 裏面，我們是需要這樣來寫的：
所以我們知道了，在 style 裏面，我們必須得傳一個 json。
那麼你肯定會有一個疑問：React 裏面不都是一個花括號 { } 嗎，爲什麼 style 這裏是兩個花括號呢？
其實這只是一個錯覺。如果我換一種寫法，就很容易理解了：
我這裏將一個 json 單獨的存到一個變量裏面，並且把這個變量輸出過去。可以看到，上面的效果是一樣的。
所以外面的一層花括號 { } 是 React 的。因爲如果你希望給組件傳的參數，是數字、json 或者變量這樣的東西，就必須得用 { }，否則到裏面的都是字符串。
其次，裏面這層花括號 { }，其實根本就不是 React 的，它是 json 的。
表面上看起來是兩層花括號，其實不是，它只是恰好而已。如果你要傳的是一個數組，它就是 { [ ] } 這樣的東西了。