ReactJS - 開始使用 Hooks

你好，未來的 React 開發者們！今天，我們將踏上一段令人興奮的旅程，進入 React Hooks 的世界。作為你們友好的鄰居計算機科學老師，我非常興奮能夠引導你們了解這個主題。如果你是編程新手，別擔心——我們會從基礎開始，逐步學習。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們一起來深入探讨吧！

ReactJS - Introduction to Hooks

React Hooks 是什麼？

在我們深入細節之前，讓我們先了解一下 React Hooks 是什麼。想像你正在建造一個樂高房子。React Hooks 就像是特殊的樂高零件，它們為你的房子提供超能力。它們讓你能在不寫類的情況下使用狀態和其他 React 功能。酷不酷？

React 在版本 16.8 中引入了 Hooks，從那時起它們就改變了遊戲規則。它們讓你的代碼更乾淨、更可重用、更易於理解。這就像整理你的房間一樣——當一切井然有序時，一切都運作得更好！

內置 Hooks

React 提供了多個內置 Hooks。讓我們看看最常見的一些：

Hook	Purpose
useState	讓功能性組件能夠管理狀態
useEffect	在功能性組件中執行副作用
useContext	訂閱 React context 而不引入嵌套
useReducer	在功能性組件中管理複雜的狀態邏輯
useCallback	返回一個記憶化的回調函數以優化性能
useMemo	記憶化昂貴的計算
useRef	創建一個在重新渲染之間持久的可變引用

現在，讓我們逐一深入這些 Hooks，並提供一些例子！

useState

useState Hook 就像一個魔法盒子，能夠在組件中存儲和更新信息。讓我們看看它是如何工作的：

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>你點擊了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
點我
</button>
</div>
);
}

在這個例子中，useState(0) 創建了一個名為 count 的狀態變量，初始化為 0，以及一個名為 setCount 的函數來更新它。每次你點擊按鈕，setCount 會被調用，更新 count 並重新渲染組件。

useEffect

useEffect 就像為你的組件設置了一個鬧鐘。它在每次渲染後運行，並能夠執行副作用。這裡有一個例子：

import React, { useState, useEffect } from 'react';

function WindowWidth() {
const [width, setWidth] = useState(window.innerWidth);

useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

return <div>視窗寬度：{width}</div>;
}

這個組件顯示當前視窗的寬度，並在視窗大小改變時更新它。useEffect Hook 在組件掛載時設置事件監聽器，並在組件卸載時清除它。

使用 Hooks

現在我們已經看了一些例子，讓我們來談談如何有效地使用 Hooks：

只在頂層調用 Hooks：不要在循環、條件或嵌套函數中調用 Hooks。這樣可以確保每次組件渲染時 Hooks 都以相同的順序被調用。
只從 React 函數組件中調用 Hooks：不要從普通的 JavaScript 函數中調用 Hooks。（有一個例外——你可以從自定義 Hooks 中調用 Hooks，我們稍後會學習！）
使用多個 Hooks：你可以在單個組件中使用任意數量的 Hooks。每次調用 Hook 都會得到獨立的狀態。

以下是一個結合多個 Hooks 的例子：

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);

useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});

if (isOnline === null) {
return '加載中...';
}
return isOnline ? '在線' : '離線';
}

這個組件使用 useState 和 useEffect 來管理朋友的在線狀態。

Hooks 的優勢

Hooks 帶來以下幾個好處：

可重用性：Hooks 讓你可以重用狀態邏輯，而不需要更改你的組件層次結構。
可讀性：它們幫助你將組件內部的邏輯組織成可重用的獨立單元。
靈活性：Hooks 提供了在組件之間共享狀態邏輯的更多靈活性。
簡潔性：它們讓你更容易理解並測試組件。

Hooks 的缺點

雖然 Hooks 非常出色，但它們也有挑戰：

學習曲線：如果你習慣於類組件，Hooks 需要一種不同的思維模式。
過度使用：很容易創建有太多自定義 Hooks，這可能會導致過度抽象。
調試：對於初學者來說，調試 Hooks 可能比類組件更具挑戰性。
有限的生命周期方法：一些生命周期方法沒有直接的 Hook 等效。

結論

恭喜你！你剛剛踏入了 React Hooks 的世界。記住，就像學騎自行車一樣，精通 Hooks 需要練習。如果它們立即沒有吸引你，別氣餒——繼續實驗並建立專案。

當我們結束時，我想到一句著名計算機科學家 Alan Kay 的名言：“預測未來的最好方法是創造它。”有了 React Hooks，你學的不僅是一個新特性——你正在為自己裝備創造 Web 開發未來的能力。

所以，勇往直前，大膽編程，願你的組件總是順利重新渲染！未來的 React 大師，祝你編程愉快！

Credits: Image by storyset