React基礎：聲明式編程

本文由Deguang 發表於 碼路-技術博客

主要的編程範式有：

• 命令式編程（Imperative Programming）
• 聲明式編程（Declarative Programming）
• 函數式編程（Funational Programming）
• 面向對象編程（Object-oriented Programming）
• ...

React推行的是聲明式編程的思想，下面來對比學習下命令式編程與聲明式編程，理解其中區別，以便於掌握React。

命令式編程

命令式編程描述代碼如何工做，告訴計算機一步步地執行、先作什麼後作什麼。

好比，去酒吧點一杯酒，指揮服務員：

• 從架子上取下一個玻璃杯；
• 把杯子放在酒桶前；
• 打開酒桶開關，直到酒杯滿；
• 把杯子遞給顧客；

這就是按照聲明式方式點一杯酒的，須要告知服務員如何給顧客提供一杯酒。

這裏有一個代碼示例，編寫一個函數，處理傳入包含大寫字符串的數組，返回包含相同小寫字符串的數組。

toLowerCase(['FOO', 'BAR']);  // ['foo', 'bar']

命令式函數實現：

const toLowerCase = arr => {
    const res = [];
    for (let i = 0, len = arr.length; i < len; i++) {
        res.push(arr[i].toLowerCase());
    }
    return res;
}

首先，建立一個空數組用於保存結果，而後遍歷輸入數組的全部元素，將每項元素的小寫值存入空數組中，而後返回結果數組；

聲明式編程

聲明式編程代表想要實現什麼目的，應該作什麼，可是不指定具體怎麼作。

聲明式點一杯酒，只要告訴服務員：我要一杯酒便可；

聲明式編程實現toLowerCase:

const toLowerCase = arr => arr.map(
    value => value.toLowerCase();
)

輸入數組的元素傳遞給 map函數，而後返回包含小寫值的新數組

對比

相對比而言，聲明式編程

• 更加簡潔、易懂，利於大型項目代碼的維護；
• 無須使用變量，避免了建立和修改狀態；

React中的聲明式

示例：帶有標記的地圖

• JavaScript 實現

const map = new Map.map(document.getElementById('map'), {
    zoom: 4,
    center: {lat,lng}
});

const marker = new Map.marker({
    position: {lat, lng},
    title: 'Hello Marker'
});

marker.setMap(map);

這是在JavaScript中命令式建立地圖、建立標記以及在地圖上添加標記的步驟；

• React組件中顯示地圖的方式：

<Map zoom={4} center={lat, lng}>
    <Marker position={lat, lng} title={'Hello Marker'}/>
</Map>

聲明式編程方式使得React組件很容易使用，最終的代碼簡單易於維護。