React hooks 徹底改變了我們在 React 中編寫元件的方式，使我們的程式碼更具可讀性、可維護性和功能性。無論您是經驗豐富的開發人員還是剛起步的開發人員，這些掛鉤都是可以顯著改進您的專案的重要工具。在本部落格中，我們將探討一些最有用的 React hook，以及如何有效使用它們的範例。
⚛️ 1. useState - 管理功能元件中的狀態
它的作用：
useState是管理功能元件狀態的首選鉤子。它允許您向元件加入狀態，然後可以隨著時間的推移進行更新。
為什麼它很重要：
狀態管理對於建立動態、互動式元件至關重要。 useState可讓您儲存和更新需要變更的值，例如表單輸入或使用者互動。
實踐中的例子：
想像一個簡單的表單，使用者可以在其中輸入自己的名字。您需要將該名稱儲存在某處，而useState提供了完美的解決方案：
import React, { useState } from 'react';
function NameForm() {
const [name, setName] = useState('');
const handleChange = (event) => {
setName(event.target.value);
};
return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>Your name is: {name}</p>
</div>
);
}在這裡， useState掛鉤存儲名稱輸入， setName在用戶鍵入時更新它。
🔄 2. useEffect - 處理副作用
它的作用：
useEffect可讓您在元件中執行副作用，例如資料取得、直接與 DOM 互動或設定訂閱。
為什麼它很重要：
副作用對於使您的應用程式動態化至關重要。如果沒有useEffect ，您的功能元件將無法執行與渲染無關的任務。
實踐中的例子：
在元件載入時取得使用者資料是一項常見任務：
import React, { useEffect, useState } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`https://api.example.com/user/${userId}`)
.then((response) => response.json())
.then((data) => setUser(data));
return () => console.log('Cleanup if needed');
}, [userId]);
return (
<div>
{user ? <p>User name: {user.name}</p> : <p>Loading...</p>}
</div>
);
}這裡， useEffect在元件掛載時取得資料，並在userId更改時更新資料。
📜 useContext - 簡化狀態共享
它的作用：
useContext允許您存取元件之間的共用狀態，而無需在元件樹的每個層級手動傳遞 props。
為什麼它很重要：
它消除了螺旋鑽探的需要，使您的程式碼更乾淨且更易於管理，尤其是在大型應用程式中。
實踐中的例子：
考慮多個元件需要存取的主題設定：
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={`btn-${theme}`}>Themed Button</button>;
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}這裡， useContext允許ThemedButton直接存取主題，而不需要透過 props 傳遞。
🚀 4. useReducer - 管理複雜狀態
它的作用：
useReducer用於透過將操作分派給減速器函數來管理複雜的狀態邏輯。它提供了比useState更多的控制，使其成為複雜狀態轉換的理想選擇。
為什麼它很重要：
當您的狀態邏輯對於useState來說太複雜時， useReducer可以幫助您更有效地管理它，特別是當下一個狀態依賴前一個狀態時。
實踐中的例子：
透過新增或刪除商品等操作來管理購物車：
import React, { useReducer } from 'react';
const initialState = { cart: [] };
function reducer(state, action) {
switch (action.type) {
case 'add':
return { cart: [...state.cart, action.item] };
case 'remove':
return { cart: state.cart.filter((item) => item.id !== action.id) };
default:
return state;
}
}
function ShoppingCart() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<ul>
{state.cart.map((item) => (
<li key={item.id}>
{item.name}
<button onClick={() => dispatch({ type: 'remove', id: item.id })}>
Remove
</button>
</li>
))}
</ul>
<button
onClick={() =>
dispatch({ type: 'add', item: { id: 1, name: 'New Item' } })
}
>
Add Item
</button>
</div>
);
}在這裡， useReducer處理從購物車加入和刪除商品的狀態轉換。
🔍 useMemo - 最佳化效能
它的作用：
useMemo用於記憶昂貴計算的結果，確保僅在必要時重新計算。
為什麼它很重要：
在複雜或大型應用程式中，優化效能至關重要。 useMemo可以防止不必要的重新計算，這會減慢您的應用程式的速度。
實踐中的例子：
根據搜尋字詞過濾列表：
import React, { useMemo } from 'react';
function FilteredList({ items, filter }) {
const filteredItems = useMemo(() => {
console.log('Filtering items');
return items.filter((item) => item.includes(filter));
}, [items, filter]);
return (
<ul>
{filteredItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}在這裡， useMemo確保過濾僅在items或filter更改時發生，從而避免不必要的計算。
📞 6. useCallback - 穩定函數引用
它的作用：
useCallback傳回回呼函數的記憶版本，這有助於防止依賴函數的元件不必要地重新渲染，特別是在將回呼作為 props 傳遞時。
為什麼它很重要：
將函數傳遞給子元件時，穩定函數引用至關重要，以避免重新渲染從而降低效能。
實踐中的例子：
防止按鈕不必要地重新渲染：
import React, { useState, useCallback } from 'react';
function Button({ onClick }) {
console.log('Button rendered');
return <button onClick={onClick}>Click me</button>;
}
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount((c) => c + 1);
}, []);
return (
<div>
<p>Count: {count}</p>
<Button onClick={increment} />
</div>
);
}在這裡， useCallback確保increment函數引用保持穩定，因此Button元件不會重新渲染，除非需要。
🧩 7. useRef - 保留值並存取 DOM 元素
它的作用：
useRef為您提供了一種在渲染之間保留值的方法，而不會在值更改時導致重新渲染。它還提供對 DOM 元素的直接存取。
為什麼它很重要：
有時，您需要維護可變值或直接與 DOM 元素互動（例如聚焦輸入欄位），而useRef是實現此目的的完美工具。
實踐中的例子：
安裝元件時自動對焦輸入欄位：
import React, { useRef, useEffect } from 'react';
function FocusInput() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return <input ref={inputRef} type="text" />;
}這裡， useRef用於在元件掛載時自動聚焦輸入字段，提供更好的使用者體驗。
結論
這些 React hook 可以改變您下一個專案的遊戲規則，讓您的程式碼更乾淨、更有效率、更易於管理。透過了解何時以及如何使用這些鉤子，您可以充分利用 React 的功能並建立更好、性能更高的應用程式。
原文出處：https://dev.to/vyan/most-useful-react-hooks-for-your-next-project-2l4i
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式