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

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

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

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

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

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

基本的封裝特性

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

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

Web Components通過(guò)自定義元素的方式實(shí)現(xiàn)組件化，而React的本質(zhì)就是關(guān)心元素的構(gòu)成，React組件即為組件元素。組件元素被描述成純粹的JSON對(duì)象，意味著可以使用方法或是類來(lái)構(gòu)建。React組件基本由3個(gè)部分構(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)用的時(shí)候只需要,每一次調(diào)用都會(huì)被編譯成React.createElement(List)方法來(lái)創(chuàng)建List實(shí)例，這意味著每次調(diào)用就會(huì)創(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}
        )
    } 

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

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

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