從零到全端：轉職者的 To-Do List 技能之旅-前端開發-React-1

15th鐵人賽

Neal

2023-10-03 20:34:21

139 瀏覽

分享至

今日目標：

了解 React 的特點

中秋節休息了兩天~~差點就不想寫了~~讓我更有動力了，為了有更多的時間做每周任務與專題，會縮小每日目標範圍。
讓我們趕快繼續這趟旅程吧！

了解 React 的特點

Imperative (命令式) vs Declarative (宣告式)

Imperative (命令式)：過去前端開發多使用命令式方式操作 DOM，即一個指令對應一個動作。這種方法著重於「怎麼做」，但在複雜的用戶界面和多變的狀態下，維護變得相對複雜和耗力。

Declarative (宣告式)：React 採用宣告式方法，我們只需描述「做什麼」，具體的執行過程則由 React 負責。

舉個例子，我們來看一下變換顏色的情況。給定三個 li 元素，當點擊其中一個時，該元素變為紅色，其餘保持黑色。

# JS imperative (命令式)
<ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>

document.querySelectorAll('.item').forEach(function(item) {
    item.addEventListener('click', function() {
        // 先將所有的顏色設置為黑色
        document.querySelectorAll('.item').forEach(function(li) {
            li.style.color = 'black';
        });

        // 將被點擊的 li 顏色設置為紅色
        item.style.color = 'red';
    });
});

# React declarative (宣告式)
import { useState } from 'react';

function MyComponent() {
    const [clickedIndex, setClickedIndex] = useState(null);

    const items = ['Item 1', 'Item 2', 'Item 3'];

    return (
        <ul>
            {items.map((item, index) => (
                <li // 因為可能修改順序，所以官網建議不要用 index 當 key，但舉例就從簡
                    key={index} 
                    onClick={() => setClickedIndex(index)}
                    style={{ color: clickedIndex === index ? 'red' : 'black' }}
                >
                    {item}
                </li>
            ))}
        </ul>
    );
}

從例子中我們可以看到，在 React 的狀態變更下，我們無需明確指定要變更的項目，而原生 JS 則需要明確的操作步驟。同時，React 也只會更新狀態改變的元件，這點會連接到 React 的另一個特點：Virtual DOM。

Virtual DOM

Virtual DOM：一種虛擬的 DOM 元素技術。React 通過將 component 轉換為 Virtual DOM 物件，接著再將其轉換為真實的 DOM，最終渲染到畫面上。重點在於，當 Virtual DOM 經歷變化時，React 會鑑別並且僅重新渲染那些發生變動的實際 DOM，由此優化性能。
考慮先前的例子。如果使用原生 JS 的寫法，我們可能需要遍歷整個 ul（雖然也可以設立一個變數來追蹤前一個變為紅色的元素，但這就變得更複雜了）。然而在 React 中，只有兩個發生變動的元件會被更新。