React 中常用的 Hooks 列表及用法

React Hooks 是 React 16.8 版本引入的一項重要特性，它極大地簡化和優化了函數組件的開發過程。以下是 React 中常用的 Hooks 列表及其詳細用法：

1. useState

useState 是用于在函數組件中添加狀態的 Hook。通過調用 useState，可以聲明一個狀態變量，并提供更新該狀態的方法。

const [state, setState] = useState(initialState);

• state：當前的狀態值。
• setState：更新狀態的函數。
• initialState：狀態的初始值。

示例：

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

2. useEffect

useEffect 是用于處理副作用的 Hook，例如數據獲取、訂閱或手動 DOM 操作。它類似于類組件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的組合。

useEffect(effect, dependencies);

• effect：副作用的回調函數。
• dependencies：依賴項數組，當數組中的值發生變化時觸發 effect。

示例：

import React, { useEffect, useState } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;}, [count]);return (<button onClick={() => setCount(count + 1)}>Click me</button>);
}

3. useContext

useContext 是用于訪問 React 的上下文（Context）的 Hook。它允許你從組件樹中任何位置讀取上下文值，而無需顯式傳遞 props。

const value = useContext(MyContext);

示例：

import React, { createContext, useContext } from 'react';const ThemeContext = createContext('light');function App() {return (<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>);
}function Toolbar() {const theme = useContext(ThemeContext);return <div>Current theme is {theme}</div>;
}

4. useReducer

useReducer 是用于管理復雜狀態邏輯的 Hook。它類似于 Redux 的 reducer 函數，適合處理多個狀態值或復雜的更新邏輯。

const [state, dispatch] = useReducer(reducer, initialState);

示例：

import React, { useReducer } from 'react';function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error();}
}function Counter() {const [state, dispatch] = useReducer(reducer, { count: 0 });return (<div>Count: {state.count}<button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button></div>);
}

5. useCallback

useCallback 是用于記憶函數的 Hook。它可以防止因為組件重新渲染導致方法被重新創建，起到緩存作用。

const memoizedCallback = useCallback(callback, dependencies);

示例：

import React, { useCallback, useState } from 'react';function ParentComponent() {const [count, setCount] = useState(0);const handleChildClick = useCallback(() => {console.log('Child clicked');}, []);return <ChildComponent onChildClick={handleChildClick} />;
}

6. useMemo

useMemo 是用于記憶計算結果的 Hook。它僅會在某個依賴項改變時才重新計算 memoized 值，從而避免不必要的開銷。

const memoizedValue = useMemo(computeFunction, dependencies);

示例：

import React, { useMemo, useState } from 'react';function ExpensiveComponent() {const [count, setCount] = useState(0);const expensiveValue = useMemo(() => computeExpensiveValue(count), [count]);return (<div><p>Expensive Value: {expensiveValue}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

7. useRef

useRef 是用于創建一個可變的引用對象的 Hook。它適用于保存 DOM 引用、計時器 ID 或其他不觸發重新渲染的值。

const refContainer = useRef(initialValue);

示例：

import React, { useRef } from 'react';function TextInputWithFocusButton() {const inputEl = useRef(null);const onButtonClick = () => {inputEl.current.focus();};return (<><input ref={inputEl} type="text" /><button onClick={onButtonClick}>Focus the input</button></>);
}

8. useLayoutEffect

useLayoutEffect 類似于 useEffect，但會在所有的 DOM 變更之后同步調用。它適用于需要測量布局并同步執行某些操作的場景。

useLayoutEffect(effect, dependencies);

9. useImperativeHandle

useImperativeHandle 是用于自定義暴露給父組件的實例值的 Hook。它通常與 ref 配合使用。

useImperativeHandle(ref, createHandle, dependencies);

10. useDebugValue

useDebugValue 是用于在開發者工具中顯示自定義 Hook 的調試標簽的 Hook。

useDebugValue(value);

---

總結

useImperativeHandle(ref, createHandle, dependencies);

10. useDebugValue

useDebugValue 是用于在開發者工具中顯示自定義 Hook 的調試標簽的 Hook。

useDebugValue(value);

---

總結