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 的嗎？