react開發教程（三）組件的構建

什麼是組件

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

組件化開發有以下的好處：
下降整個系統的耦合度，在保持接口不變的狀況下，咱們能夠替換不一樣的組件快速完成需求。
例如輸入框，能夠替換爲日曆、時間、範圍等組件做具體的實現。調試方便，因爲整個系統是經過組件組合起來的，在出現問題的時候，能夠用排除法直接移除組件，或者根據報錯的組件快速定位問題，之因此可以快速定位，是由於每一個組件之間低耦合，職責單一，因此邏輯會比分析整個系統要簡單。
提升可維護性，因爲每一個組件的職責單一，而且組件在系統中是被複用的，因此對代碼進行優化可得到系統的總體升級。

在團隊開發中，組件化帶來的優點是便於協同開發，因爲代碼中的耦合度下降了，每一個模塊均可以分拆爲一個組件，例如異步請求組件，路由組件，各個視圖組件。
團隊中每一個人發揮所長維護各自組件，對整個應用來講是精細的打磨。

在Javascript 的開發中，組件化其實和模塊化的意義至關，大概是根據功能、業務進行代碼劃分，使到這部分的代碼能夠被複用，例如 $、_ 這些工具庫就是將功能進行模塊化。
其實組件化的本質上和咱們以往的模塊化並沒有差異。
只不過模塊化是對js進行了模塊的打包，而一個組件包含了對應的（css，js，數據）

組件的規範

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

1. 基本的封裝特性
2. 簡單的生命週期（組件的建立，更新，卸載）
3. 明確的數據流動（更具參數的不一樣作出不一樣的響應）

React組件構建

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

React.createClass

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

const List = React.createClass({
        getDefaultProps() {
            return {
                color : "#f00",
                text : "我是列表"
            }
        },
        
        render() {
            const {color,test} = this.props;
            return (
                <li className={`btn btn-${color}`}>{test}</li>
            )
        }
    })

調用的時候只須要<List/>,每一次調用都會被編譯成React.createElement(List)方法來建立List實例，這意味着每次調用<List/>就會建立一次li;

ES6 class

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 (
                <li className={`btn btn-${color}`}>{test}</li>
            )
        }
        
    }

無狀態函數

function List({color="#f00",test="我是列表"}){
        return (
            <li className={`btn btn-${color}`}>{test}</li>
        )
    }

無狀態函數構建的組件稱爲無狀態組件，這種構建方式是0.14版本後新增的，官方推崇

在合適的狀況下咱們都應該使用這種組件方式。無狀態組件不像上述兩種方法在調用時會建立新實例，它建立時始終保持了一個實例，避免了沒必要要的檢查和內存分配，作到了內存優化。

上一篇：react開發教程（二）安裝
下一篇：react開發教程（四）React數據流