iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
0
Modern Web

Node-Red 貓的真實之口系列 第 13

Node-Red 貓的真實之口-React 基礎觀念與開發工具 - 4

React 元件屬性:元件的資料來源

昨天我們對於 React 元件有了初步的認識,
接著讓我們來探討一個關鍵的問題。

❓React 元件如何知道要顯示什麼資訊?

React 元件會根據它的屬性,來決定顯示的 HTML

就像是設定 HTML 屬性一樣,我們可以將 JavaScript 的值輸入給元件屬性,這樣元件就能根據屬性來顯示。

以先前的 App.js 為例,第 29 行的 Welcome 元件有個屬性 numUsers ,他的值代表上線的使用者數量。這裡設定為 3 (第 10 行),所以顯示的 HTML 會是 Let's chat with 2 friends

React 元件就像機器,吃變數,吐 HTML

接下來我們可以來看看 Welcome.js 裡記載 Welcome 元件產生 HTML 的邏輯。

可以看到其實 Welcome 元件其實就是個函式,元件屬性就是函數參數,回傳值就是 JSX。輸出的 HTML 其實是 small 元素,其文字內容用大括號包住 JS 表達式。表達式裡面根據屬性判斷來顯示文字。

看到這裡,你對於 React 元件有什麼感覺呢?

個人認為它在兩個方面讓開發者有很好的體驗:

  1. 開發者不用實際操作 DOM API 修改 HTML,而是讓輸入 JS 值給元件,React 幫你完成低階的 DOM API。
  2. 你不用撰寫太多命令式的程式風格,而是使用函數式的程式風格,讓變數等資料從根節點,單方向往內部流動。讓除錯更為輕鬆。

React 元件的單方向資料流特性,其實和 Node-RED 的 node 有許多共同之處。元件和 node 都像是函數一樣,將資料一進一出做單方向的轉換。React 應用和 node-RED 應用一樣,都是將小單元以「串接」「包裝」等操作,組合成大型應用和來實現複雜的邏輯。

?讀讀 MessageCardGroup.js,你知道他是如何以 JS 陣列產生 HTML 的嗎?


上一篇
Node-Red 貓的真實之口-React 基礎觀念與開發工具 - 3
系列文
Node-Red 貓的真實之口13

尚未有邦友留言

立即登入留言