React基礎：宣告式程式設計

Deguang發表於2018-08-08
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元件很容易使用，最終的程式碼簡單易於維護。

相關文章