1，元件是React 開發框架中，最重要的設計概念。這也是React能夠 幫助我們簡單容易的開發複雜使用者介面的有效利器。假定我們最終開發的網頁應用如圖所示，它的介面右1系列複雜的 控制元件元素組合而成。原有的設計思想是，把這些複雜的控制元件組合當做一個單一整體來開發，由於控制元件間需要相互通訊，因此不同元件間 耦合度很多，開發1個控制元件時，你需要考慮這個控制元件與其他控制元件的 相互聯絡，這樣一來設計思路會變得非常複雜

2，React 的做法是，把這個介面不斷的分解，一個大而複雜的控制元件 分解成多個小控制元件的相互組合，小控制元件還可以繼續往下分割，分成 更小的更簡單的控制元件間的組合，這種切分不斷進行，直到不可以 再往下細分為⽌止。我們從圖中可以看到，原來整合在一起的大塊介面被虛線分解 成了多個小控制元件，有些小控制元件裡面還可以再切分成多個更小控制元件 的組合。
元件化的本質，其實就是面向物件的設計思想。元件化可以對應於 一個類，每個類都對外輸出不變的接⼝，只要接⼝不變，類與類間 的通訊可以根據接⼝進行，由此不同元件間的耦合度就降低了。 同時複雜的類可以通過若干個簡單的類組合而成，這樣一來，不但 可以提高元件的重用性，同時通過組合的思想來設計複雜的控制元件， 也極大的降低了複雜控制元件的設計難度

,

3，元件與函式很類似，我們先看假定我們想計算一個矩形的面積。 那麼我們需要把高和寬相乘才能得到結果。

在沒有函式之前，我們計算一次面積，就要把寬和高相乘一次。 計算兩次面積就得相乘兩次，有了函式就不一樣了，函式能夠把計算面積的邏輯包裝起來，每次 計算面積時，不用再把計算步驟走一遍，只要把相關引數輸入函式 就可以了。複雜的函式還可以通過呼叫多個簡單的函式來實現。元件與函式的 思想是一樣的，元件把介面繪製的邏輯包裝起來，通過給元件傳入不同的引數，進而改變元件最終顯示的形態，同時複雜的元件可以 轉換成多個簡單元件的組合，通過不同元件的相互組合，我們能 創造出無數多個複雜的複合元件

接下來我們要構建一個Hello World元件，這個元件的功能是在 介面上列印一句話：Hello World!

要想在介面上繪製資訊，我們需要 呼叫React 框架的render API,也就是程式碼要這麼寫

接下來，我們要通過元件化的方式實現上面的功能，我們先使用React API createClass 來建立元件物件。我們要建立一個 Hello World 元件的話，我們可以使用下面程式碼：

<script type="text/babel">
var HelloWorld  =   React.createClass(
    {
        render: function() {
        }
    });
    ReactDOM.render(
         <div>
            <p>Hello World!</p>
         </div>,
         document.querySelector("#container")
    );
</script>
 

<script type="text/babel">
var HelloWorld  =   React.createClass({
        render: function() {
                return  (
                    <p>Hello, World!</p>
                );
            }
        });
    ReactDOM.render(
         <HelloWorld/>,
         document.querySelector("#container")
    );
 </script>

大家看到，在ReactDOM.render中，我們直接把上面生成的元件 輸入，React框架會自動呼叫HelloWorld元件的render函式， 然後解讀它返回的JSX物件，接著在DOM中新增相應元素，於是 最終語句“Hello World!" 就出現在介面上了

我們以前強調 JSX 與html 是不同的，在這裡就顯示了他們兩者 的不同，因為在html裡面是沒有HelloWorld標籤的，同時在JSX 中，一個標籤往往對應著一個元件，在html中，是沒有元件的概念 的。

元件的一大特點是可重用性，我們可以對元件進行多次呼叫，從而實現在介面上列印多條語句：

<script type="text/babel">
var HelloWorld  =   React.createClass({
        render: function() {
                return  (
                    <p>Hello, World!</p>
                );
            }
        });
    ReactDOM.render(
        <div>
            <HelloWorld/>
            <HelloWorld/>
            <HelloWorld/>
            <HelloWorld/>
        </div>,
        document.querySelector("#container")
    );
 </script>

元件的引數化 就像函式，當輸入不同的引數時，函式可以根據輸入 引數，返回不同的運算結果。同樣元件也可以輸入引數，根據 不同輸入引數，在元件繪製到界到時，顯示出不同的形態。我們把元件輸出的那條語句轉變為元件的引數，這樣輸入不同 引數，元件就能在介面上顯示不同語句，程式碼修改如下

<script type="text/babel">
var HelloWorld  =   React.createClass({
        render: function() {
                return  (
                    <p>Hello, {this.props.greetTarget}!</p>
                );
            }
        });
    ReactDOM.render(
        <div>
            <HelloWorld/>
            <HelloWorld/>
            <HelloWorld/>
            <HelloWorld/>
        </div>,
        document.querySelector("#container")
    );
 </script>

在呼叫元件的同時，把引數內容輸入：

<script type="text/babel">
var HelloWorld  =   React.createClass({
        render: function() {
                return  (
                    <p>Hello, {this.props.greetTarget}!</p>
                );
            }
        });
    ReactDOM.render(
        <div>
            <HelloWorld greetTarget="Tyler"/>
            <HelloWorld greetTarget="Nancy"/>
            <HelloWorld greetTarget="Jacket"/>
        </div>,
        document.querySelector("#container")
    );
 </script>

元件的孩子JSX 所代表的元件跟html標籤有一個相似之處，那就是元件內部 可以再包含其他元件。那麼如果一個元件包含了另一元件的話， 內部被包含的元件可以稱之為外面元件的孩子，

結論： 使用React 框架開發網頁運用時，使用元件是必不可免的。正是 因為元件化的設計思想，我們才能在React基礎上，快速開發出 高效可重用的介面控制元件