>[danger]React的常見hook React Hooks 是在 React 16.8.0 版本中首次引入的。 React v16.8 中引入了 Hooks ，是 React 一種全新的狀態管理方式，它提供了一些可以讓函數組件擁有類組件同樣功能的 API。 其中最常用的 Hook API 包括： 1. `useState`：該 Hook 用于在函數組件中添加一個狀態管理器。通過 `useState`，可以創建一個狀態變量及其更新函數，并在組件內使用該變量來保存和更新組件的狀態。[[1](https://reactjs.org/docs/hooks-state.html)] 2. `useEffect`：該 Hook 用于在組件渲染完成后執行一些副作用操作（例如訂閱數據、更新 DOM 等）。通過 `useEffect`，可以在組件加載、更新和卸載時設置和清理副作用操作，并且可以在副作用操作之間共享狀態。[[2](https://reactjs.org/docs/hooks-effect.html)] 3. `useContext`：該 Hook 用于在組件之間共享一些全局的狀態或函數，以避免通過多層嵌套的 Props 傳遞進行數據傳輸。通過 `useContext`，可以讓組件在全局狀態或函數的上下文中運行，并讓它們能夠方便地讀取或更新全局狀態或函數。[[3](https://reactjs.org/docs/hooks-reference.html#usecontext)] 4. `useReducer`：該 Hook 用于在組件中使用一種“狀態容器”模式，以避免通過多層 Props 傳遞或 Context 共享進行狀態管理。通過 `useReducer`，可以創建一個狀態容器及其更新函數，并在組件內使用該容器來保存和更新組件的狀態。[[4](https://reactjs.org/docs/hooks-reference.html#usereducer)] 5. `useMemo`：該 Hook 用于在組件渲染完成后緩存一些計算結果，以避免因為重復計算導致的性能問題。通過 `useMemo`，可以創建一個緩存變量，并在組件內使用該變量來保存計算結果并緩存。[[5](https://reactjs.org/docs/hooks-reference.html#usememo)] 6. `useCallback`：該 Hook 用于在組件渲染完成后，將一些函數進行緩存，以避免因函數重復創建導致的性能問題。通過 `useCallback`，可以創建一個緩存函數，并在組件內使用該函數來代替重復創建的函數。[[6](https://reactjs.org/docs/hooks-reference.html#usecallback)] 7. `useRef`：該 Hook 用于在組件渲染完成后創建一個引用，以便在組件多次渲染時能夠保留上一次渲染中的值。通過 `useRef`，可以創建一個引用變量，并在組件內使用該變量來保存一些持久化的數據。[[7](https://reactjs.org/docs/hooks-reference.html#useref)] 8. `useImperativeHandle`：該 Hook 用于在組件中實現一些自定義的 Ref 對象，并且要求將一些組件內部的方法或狀態暴露給父組件使用。通過 `useImperativeHandle`，可以創建一個自定義的 Ref 對象，并在組件內指定一些公開的方法或屬性。[[8](https://reactjs.org/docs/hooks-reference.html#useimperativehandle)] 9. `useLayoutEffect`：該 Hook 與 `useEffect` 類似，但它會在瀏覽器渲染更新之前同步執行副作用操作，以確保 React 組件與瀏覽器同步更新。通常情況下，應該使用 `useEffect`，但在需要直接操作 DOM 元素或進行測量布局界面時，應當使用 `useLayoutEffect`。[[9](https://reactjs.org/docs/hooks-reference.html#uselayouteffect)] 10. `useDebugValue`：該 Hook 可以幫助開發者在調試工具中顯示額外的信息，以便更好地理解 Hook 的使用和行為。通常情況下，這個 Hook 只用于調試過程中，而不是實際的應用程序代碼中。[[10](https://reactjs.org/docs/hooks-reference.html#usedebugvalue)] >參考資料： 1. [React 官方文檔 - State Hook](https://reactjs.org/docs/hooks-state.html) 2. [React 官方文檔 - Effect Hook](https://reactjs.org/docs/hooks-effect.html) 3. [React 官方文檔 - useContext](https://reactjs.org/docs/hooks-reference.html#usecontext) 4. [React 官方文檔 - useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) 5. [React 官方文檔 - useMemo](https://reactjs.org/docs/hooks-reference.html#usememo) 6. [React 官方文檔 - useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) 7. [React 官方文檔 - useRef](https://reactjs.org/docs/hooks-reference.html#useref) 8. [React 官方文檔 - useImperativeHandle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle) 9. [React 官方文檔 - useLayoutEffect](https://reactjs.org/docs/hooks-reference.html#uselayouteffect) 10. [React 官方文檔 - useDebugValue](https://reactjs.org/docs/hooks-reference.html#usedebugvalue)