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

組件化就好像我們的電腦裝機一樣，一個電腦由顯示器、主板、內存、顯卡、硬盤，鍵盤，鼠標...。

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

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

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

組件化的封裝思路就是面向對象思想；

基本的封裝特性

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

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

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

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

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

調用的時候只需要,每一次調用都會被編譯成React.createElement(List)方法來創(chuàng)建List實例，這意味著每次調用就會創(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ù)構建的組件稱為無狀態(tài)組件，這種構建方式是0.14版本后新增的，官方推崇

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

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