tags: React Hooks

[學習筆記] React 內建的所有 Hooks 功能整理

本篇是參考官方文件，整理 React 內建的 Hooks API 功能。

• Basic Hooks
  • useState
  • useEffect
  • useContext
• Additional Hooks
  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue

Basic Hooks

useState：用來設定 component 的 state

• 第一次 render 時，回傳的 state 值會和 initialState 參數相同
• 可透過 setState 來更新 state，state 一旦改變，就會觸發 React 去重新渲染畫面

const [state, setState] = useState(initialState

setState(newState);

useEffect：用來告訴 React component 在 render 之後要做的事情

• 第一個參數帶入的 function 會在「畫面渲染完成後」被呼叫
• 第二個參數傳入一個陣列，用來放想要關注的資料，當變數改變時才會呼叫 useEffect

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

useContext：解決跨多層傳遞資料的問題，就像建立了全域變數

• 讓父層的資料能夠被底下的任意子層存取，不需要像 props 一層一層傳遞下去，避免造成 Props drilling
• 用 React.createContext 建立一個 context 物件，並由 <MyContext.Provider value={}> 存取該物件的值，底下的子層就可以直接透過 useContext 來存取 MyContext

const value = useContext(MyContext);

Additional Hooks

useReducer：是 useState 的替代方案，當 state 邏輯變得複雜，需要操作多種 state 時可使用

• state：當前的 state 值
• dispatch：透過參數來和 function 溝通，藉此控制處理方式
• reducer： 用來接受一個 (state, action) => newState，並回傳當前的 state 和對應的 dispatch 方法
• initState：設定 state 的初始值

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

useCallback：用來記憶父元件的記憶體位置，避免在重新渲染時被重新分配

• 第一個參數是 function，第二個參數是其依賴陣列，會回傳一個 memoized 的 callback
• 在重新渲染時，只會在依賴改變時才更新，防止不必要的渲染，減少效能上的消耗

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo：用途是當 component 重新渲染時，能避免複雜的程式被重複執行

• 第一個參數是 function，第二個參數是其依賴陣列，會回傳一個 memoized 的值
• 在重新渲染時，傳到 useMemo 的 function 就只會在依賴改變時才執行，將 memoized 更新成回傳的值

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef：用來抓取 DOM 節點，存放的值不會受到 render 影響

• 會回傳一個 mutable 的 ref object，其 .current 屬性會被初始為傳入的參數 initialValue
• 當 .current 屬性有變動時不會觸發重新 render，而每次 render 時都會給同一個 ref object

const refContainer = useRef(initialValue);

console.log(refContainer.current)
// initialValue

useImperativeHandle：可以在父層調用子層中 ref，選取指定的 DOM 節點

• 第一個參數是接收的 ref
• 第二個參數是傳給父層的方法

useImperativeHandle(ref, createHandle, [deps])

useLayoutEffect：功能與 useEffect 相似，差別在於 useLayoutEffect 會在 render 之前執行

useDebugValue：可用來在 React DevTools 中顯示自訂義 hook 的標籤

useDebugValue(value)