1. 聲明式（Declarative）

React 鼓勵開發者 描述 UI 應該是什么樣子，而不是逐步操作 DOM。

// 聲明式
function Greeting({ name }) {return <h1>Hello, {name}</h1>;
}

• 不用手動操作 DOM（document.getElementById / innerHTML）
• React 根據狀態自動更新 UI

面試回答示例：

“React 倡導聲明式編程，我們只關心狀態是什么樣子，React 會負責把狀態映射成界面，簡化了 DOM 操作和狀態管理的復雜度。”

---

2. 組件化（Component-Based）

• UI 被拆分成可復用、獨立的組件
• 每個組件管理自己的狀態和邏輯
• 便于維護和組合

function Button({ onClick, children }) {return <button onClick={onClick}>{children}</button>;
}

面試回答示例：

“React 通過組件化思想，把頁面拆成小的、可復用的塊，每個組件只關注自己的狀態和 UI，提高了代碼的可維護性和復用性。”

---

3. 單向數據流（One-way Data Flow）

• 數據從父組件流向子組件
• 狀態集中、可控
• 簡化調試和邏輯理解

function Parent() {const [count, setCount] = useState(0);return <Child count={count} />;
}

面試回答示例：

“React 數據是單向流動的，父組件通過 props 傳遞數據給子組件，這樣數據的變化是可追蹤的，狀態管理更清晰。”

---

4. UI = f(state)（函數式思想）

• React 的 UI 可以看作是 狀態到界面的函數
• 輸入（state/props）確定輸出（UI），減少副作用

function TodoList({ todos }) {return (<ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>);
}

面試回答示例：

“在 React 中，界面完全由狀態驅動，我們可以把 UI 看作是狀態的函數，狀態變化就會自動映射到 UI 上。”

---

5. 虛擬 DOM（Virtual DOM）

• React 使用虛擬 DOM 對比狀態變化前后的差異，只更新必要的部分
• 提高渲染效率

面試回答示例：

“React 使用虛擬 DOM diff 算法，避免不必要的 DOM 操作，提升性能，同時開發者不用手動優化 DOM。”

---

6. hooks

Hooks 之所以叫鉤子，是因為它提供了一種方式，讓函數組件可以‘鉤入’ React 的狀態管理和生命周期等機制。

比如 useState 鉤住了 state，useEffect 鉤住了副作用邏輯。它的本質就是一個連接點，讓函數組件不再只是一個純函數，而能復用邏輯、維護狀態，從而擁有類組件的能力甚至更靈活。

? 總結

1. 聲明式：只描述想要的 UI
2. 組件化：UI 拆分成獨立、復用的組件
3. 單向數據流：父傳子，狀態可控
4. 函數式 UI：UI = f(state)
5. 虛擬 DOM：高效更新 DOM