聲明： React基礎（一）的內容來自騰訊課堂 Web前端【紅點工場】的視頻，原作者是 Skipper 老師。
接下來的 Demo 6，我們會考慮一個新的東西：進行一個組件化的包裝。
就是把按鈕當做一個組件，然後在我們需要使用的時候，不斷的複用就可以了，並且也是純粹的 JS。
Demo 6：
那麼在寫這個 Demo 之前，我們先思考一下，
我們之前，無論是寫表單，還是按鈕，它們都會有一些共同點，
比如它們都會有：state，setState 方法，render 方法，
還會有一個控制的方法，比如 handleClick 方法。
那麼既然它們每一個都有這些東西，我們是不是能把它們提取成一個對象呢？
接下來，我們就來試一下：
我們可以看到，剛開始頁面是空白的，
當我們在控制檯上 new Button() 的時候，
首先，它會構建一個 state --> this.state = { ... }，
然後它會根據 state 來渲染這個頁面 --> this.render()，
最終就會把整個模版字符串，填充到 id = "root" 的這個標籤裏面去，
這時候，我們就有了一個點贊按鈕了，並且是根據它自己的 state 來渲染。
那麼，這麼寫的好處是什麼呢？
先別急，我們再寫一個 title 的組件：
那麼完成 title 組件之後，我們發現，兩個組件之間會有一個衝突問題：
因爲 root 標籤只有一個，所以組件也只能有一個，要麼是 button，要麼是 title。
那麼我們是不是應該思考一下，我們設定組件的目的是什麼？
是不是，我們只要實例化，new 一個，就生成一個組件，
如果想複用，new 多少次，就有多少個組件，
那麼我們就不能直接賦值給 root.innerHTML 了，
我們可以換一種模式，當我們調用 render() 函數的時候，直接 return 一個字符串出來。
那麼，我們可以先去掉 constructor 和 setState 裏面的 this.render() 方法調用：
那麼爲什麼要這麼做呢，它的好處又是什麼呢？
別急，我們繼續往下看，
首先我們構造一個容器 Wrap，那麼每次我們都可以在 Wrap 裏面不斷的去複用我們定義的組件：
可以看到，現在我們是不是可以不斷的複用某個類了。
我們把一個組件寫好之後，只要在別的組件裏面引用它，就可以不斷的去構建新的組件，
用小組件，組合成大組件，再用大組件，組合成更大的組件，最終，構成一整個網頁。
我們的組件可以反覆的用在別的地方，這個就是組件式開發的思想。
那麼，我們是否發現一個問題：
我們的每一個組件，都需要寫一個 setState 方法？
那麼我們可以是不是可以把這個方法提取出來，放到父類 Component 裏面，以供它們繼承使用呢？
那麼我們的每一個組件，以後就都可以不用寫 setState 方法了，
我們只需要 extends Component 就可以了：
可以看到，頁面同樣渲染出來了，
並且在右邊的控制檯上，button.setState 是有值的，並且它是一個方法，
下面也可以清楚的看到，setState 這個方法，它是繼承自 Component 的。
其實在 React 裏面，就有給我們提供一個類，就叫做 Component，
我們在寫任何組件的時候，都需要用 extends 去繼承它，才能夠使用。
那麼，我們明白了：
Component 提供了一個基礎，把一些，每個組件都要用的東西，都放在這裏，
那麼你要寫一個新組件的時候，只需要去 extends 繼承一下，
再去實現你想要的功能就可以了。
到此，我們是不是已經瞭解了 React 的一些基本模式呢？