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

使用React Component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 把下面整個 .container 給包成 component
<div class="container">
<div class="plus">+</div>
<div class="num">0</div>
<div class="minus">-</div>
</div>
======================================================
// 用一個 function 包起來
const Count = () => {
return (
<div className="container">
<div className="plus">+</div>
<div className="num">0</div>
<div className="minus">-</div>
</div>
);
}
======================================================
// 因為是直接回傳一個值,可以直接省略 return
const Count = () => (
<div className="container">
<div className="plus">+</div>
<div className="num">0</div>
<div className="minus">-</div>
</div>
);

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

需要注意的地方

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

如何重複使用 Component

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

Component 的事件處理

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

  • 使用變數
    在 Component 中定義一個變數,並使用它:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const Counter = () => {
    const countNum = 0; // 定義變數
    return (
    <div className="container">
    <div className="plus">+</div>
    {/* 使用變數 */}
    <div className="num">{ countNum }</div>
    <div className="minus">-</div>
    </div>
    );
    }
  • 綁定事件監聽
    接著需要綁定一個事件監聽來執行動作,跟 原生 JavaScript 的 onclick 一樣,只是在 React 中使用的是 onClick,也跟 Vue 的 @click 差不多,然後需要再給它一個函式去執行:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const Counter = () => {
let countNum = 0;
return (
<div className="container">
<div className="plus"
{/* 當按 + 時,讓 countNum 加 1 */}
onClick={() => {
countNum = countNum + 1;
console.log(countNum);
}}
>+</div>
<div className="num">{ countNum }</div>
<div className="minus">-</div>
</div>
);
}

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

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