react組件化設計

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>

每一個組件都要導出一個接⼝叫render, React將會調用組件的 render接⼝，把它繪製到界面上。由於我們的組件是在界面上 輸出語句 ：Hello World，因此組件的render內容如下

<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基礎上，快速開發出 高效可重用的界面控件