建立並使用 React Component

在前端框架中，將原本 UI 拆分成獨立而且可以重複使用的程式碼，就是 Component（Angular 我不確定是不是，不過我在 Vue 蠻常用的）。拆成 Component 的好處是，方便日後維護以及可以專注在個別程式碼的開發，還有最棒的是可以當作是一個樂高積木一樣重複使用組合。

使用React Component

// 把下面整個 .container 給包成 component

====================================================== // 用一個 function 包起來 const Count = () => { return (

); } ====================================================== // 因為是直接回傳一個值，可以直接省略 return const Count = () => (

);

// 把 Component 當成一個 HTML 標籤給包起來就可以運行了 ReactDOM.render(, document.getElementById("root"));

需要注意的地方

命名 Component 時，必須要使用大寫，如果用小寫的話，就會當成一般的 HTML 元素（我在這地方卡好久，一直找不到哪裡錯）。

如何重複使用 Component

Component 厲害的地方就是可以一直重複使用，例如：

See the Pen React Component by Bucky Chu (@bucky0112) on CodePen.

Component 的事件處理

前面雖然成功顯示多個 Component 了，但是該有的互動效果還沒處理，這邊就來示範怎麼處理。

使用變數在 Component 中定義一個變數，並使用它：

const Counter = () => { const countNum = 0; // 定義變數 return (

{/* 使用變數 */}

{ countNum }

); }

綁定事件監聽接著需要綁定一個事件監聽來執行動作，跟原生 JavaScript 的 onclick 一樣，只是在 React 中使用的是 onClick，也跟 Vue 的 @click 差不多，然後需要再給它一個函式去執行：

const Counter = () => { let countNum = 0; return (

<div className="plus" {/* 當按 + 時，讓 countNum 加 1 */} onClick={() => { countNum = countNum + 1; console.log(countNum); }} >+

{ countNum }

); }

雖然 console 顯示數字有更新，但是畫面卻沒有更新顯示。接著加上 {console.log("test render")} 來測試是否每次更新資料，畫面會重新 render：

See the Pen React Component by Bucky Chu (@bucky0112) on CodePen.

結果 "test render" 只有出現一次，還是沒有顯示更新的數字，原因是因為 React 並不知道資料有更新。在下一次會介紹 React 的 Hook 可以幫助我們處理這個問題。