摘要：在團(tuán)隊開發(fā)中，組件化帶來的優(yōu)勢是便于協(xié)同開發(fā)，由于代碼中的耦合度降低了，每個模塊都可以分拆為一個組件，例如異步請求組件，路由組件，各個視圖組件。

組件化就好像我們的電腦裝機(jī)一樣，一個電腦由顯示器、主板、內(nèi)存、顯卡、硬盤，鍵盤，鼠標(biāo)...。

組件化開發(fā)有如下的好處：
降低整個系統(tǒng)的耦合度，在保持接口不變的情況下，我們可以替換不同的組件快速完成需求。
例如輸入框，可以替換為日歷、時間、范圍等組件作具體的實現(xiàn)。調(diào)試方便，由于整個系統(tǒng)是通過組件組合起來的，在出現(xiàn)問題的時候，可以用排除法直接移除組件，或者根據(jù)報錯的組件快速定位問題，之所以能夠快速定位，是因為每個組件之間低耦合，職責(zé)單一，所以邏輯會比分析整個系統(tǒng)要簡單。
提高可維護(hù)性，由于每個組件的職責(zé)單一，并且組件在系統(tǒng)中是被復(fù)用的，所以對代碼進(jìn)行優(yōu)化可獲得系統(tǒng)的整體升級。

在團(tuán)隊開發(fā)中，組件化帶來的優(yōu)勢是便于協(xié)同開發(fā)，由于代碼中的耦合度降低了，每個模塊都可以分拆為一個組件，例如異步請求組件，路由組件，各個視圖組件。
團(tuán)隊中每個人發(fā)揮所長維護(hù)各自組件，對整個應(yīng)用來說是精細(xì)的打磨。

在Javascript 的開發(fā)中，組件化其實和模塊化的意義相當(dāng)，大概是根據(jù)功能、業(yè)務(wù)進(jìn)行代碼劃分，使到這部分的代碼可以被復(fù)用，例如 $、_ 這些工具庫就是將功能進(jìn)行模塊化。
其實組件化的本質(zhì)上和我們以往的模塊化并無差別。
只不過模塊化是對js進(jìn)行了模塊的打包，而一個組件包含了對應(yīng)的（css，js，數(shù)據(jù)）

組件化的封裝思路就是面向?qū)ο笏枷耄?/p>

基本的封裝特性

簡單的生命周期（組件的創(chuàng)建，更新，卸載）

明確的數(shù)據(jù)流動（更具參數(shù)的不同做出不同的響應(yīng)）

Web Components通過自定義元素的方式實現(xiàn)組件化，而React的本質(zhì)就是關(guān)心元素的構(gòu)成，React組件即為組件元素。組件元素被描述成純粹的JSON對象，意味著可以使用方法或是類來構(gòu)建。React組件基本由3個部分構(gòu)成----屬性(props)、狀態(tài)（state）、以及生命周期方法。

用React.creatClass構(gòu)建組件是React最傳統(tǒng)，也是兼容性最好的方法。

    const List = React.createClass({
        getDefaultProps() {
            return {
                color : "#f00",
                text : "我是列表"
            }
        },
        
        render() {
            const {color,test} = this.props;
            return (
                
{test}
            )
        }
    })

調(diào)用的時候只需要,每一次調(diào)用都會被編譯成React.createElement(List)方法來創(chuàng)建List實例，這意味著每次調(diào)用就會創(chuàng)建一次li;

    import React, {Component} from "react";
    class List extends Component {
        constructor(props) {
            super(props)
        }
        
        static defaultProps = {
            color : "#f00",
            text : "我是列表"
        };
        
        render() {
            const {color,test} = this.props;
            return (
                
{test}
            )
        }
        
    }

    function List({color="#f00",test="我是列表"}){
        return (
            
{test}
        )
    } 

無狀態(tài)函數(shù)構(gòu)建的組件稱為無狀態(tài)組件，這種構(gòu)建方式是0.14版本后新增的，官方推崇

在合適的情況下我們都應(yīng)該使用這種組件方式。無狀態(tài)組件不像上述兩種方法在調(diào)用時會創(chuàng)建新實例，它創(chuàng)建時始終保持了一個實例，避免了不必要的檢查和內(nèi)存分配，做到了內(nèi)存優(yōu)化。

上一篇：react開發(fā)教程（二）安裝
下一篇：react開發(fā)教程（四）React數(shù)據(jù)流