簡化React Hook的方法有哪些

這篇文章主要講解了“簡化React Hook的方法有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“簡化React Hook的方法有哪些”吧！

1. 減少 useState 數量

當你使用hook進行開發時，很容易使用過多的 useState 調用，或者將所有的狀態縮減為單一的、過于復雜的  useState。提高hook的可讀性的最好方法之一就是優先考慮你的 useState 調用。我喜歡在我寫的鉤子中遵循一些關于狀態實現的規則。

(1) 優先考慮易讀性

我更喜歡將狀態讀取為對象，而不是使用多個具有簡單值的 useState 命令。使用更少的 useState  命令也會讓你的鉤子的返回更容易，并且在組件中的實現更直接。雖然這是我的偏好，但代碼是一個非常個人化的東西，也是非常有表現力的。我寫代碼時的第一條規則是優先考慮可讀性，遵循這個規則會讓你的代碼更容易維護，迫使你去思考你所寫的東西，并讓別人更容易遵循你的代碼。如果這是你從這個文章中帶走的唯一東西，那么我已經完成了我的工作。

(2) 評估狀態對象的內容

組件從一開始就沒有被完美地規劃過，隨著組件的增長，你的 useState 中包含的屬性可能也會變得越來越復雜。在整個開發周期中，我強烈建議評估你的  useState 調用的內容，以確定將狀態部分分成其他 useState  調用是否有意義。你可能想按功能或類型對狀態值進行分組。一般來說，我喜歡把狀態數據按照我認為通常會一起更新的屬性來分組，或者按照狀態屬性的功能來分組，比如數據和視圖屬性。

2. 利用你的Hook返回

當我剛開始寫自定義Hook時，很容易遵循類似于默認的 useState  鉤子的返回樣式。雖然這并不是壞事，但在函數之上使用一個返回數組來返回多個狀態變量，會很麻煩。想象一下，除了處理數據選擇的函數外，還可以返回2個不同的狀態變量(1個是數據狀態，1個是視圖狀態)的鉤子，用數組風格的返回方式編寫，它可能看起來像這樣。

function useBasicHook() {   const [dataState, setDataState] = useState({     serverData: {},     selections: {}   });   const [viewState, setViewState] = useState({     menuExpanded: false,     submitFormData: {}   })      const toggleMenuExpand = () => {     setViewState({       menuExpanded: !viewState.menuExpanded,       submitFormData: viewState.submitFormData     })   }      return [dataState, viewState, toggleMenuExpande]; }  function BasicComponent(){   const [dataState, viewState, toggleMenuExpand] = useBasicHook();      return <div>     </div> }

看看這個hook，很容易看出，如果在返回中添加額外的函數或變量，hook的實現會很快失控。如果你不小心破壞了數組的順序，或者用不正確的名稱，會造成額外的混亂和可能的錯誤。我們可以通過更新hook返回一個對象來防止這種情況的發生，就像這樣。

function useBasicHook() {   const [dataState, setDataState] = useState({     serverData: {},     selections: {}   });   const [viewState, setViewState] = useState({     menuExpanded: false,     submitFormData: {}   })      const toggleMenuExpand = () => {     setViewState({       menuExpanded: !viewState.menuExpanded,       submitFormData: viewState.submitFormData     })   }      return {     dataState: dataState,     viewState: viewState,     toggleMenuExpand: toggleMenuExpand   }; }  function BasicComponent(){   const state = useBasicHook();   // or   // const {dataState, viewState, toggleMenuExpand} = useBasicHook();      return <div>     </div> }

將返回值轉換為對象還有其他好處，包括：

• 如果hook在多個組件之間共享或作為庫共享，則在更新后提高hook版本的兼容性;

• 在使用Hook在組件頂部提供相同級別的Hook API時，仍然可以解構對象。

還有一件很酷的事情，你可以用你的鉤子返回，就是在你的狀態中創建基于組件工廠函數的小狀態。這提供了一種很好的方式，可以將組件構建器共享給實現鉤子的組件，而無需將狀態公開給該組件。

3. 使用合并鉤子簡化 setState 調用

在React中使用類而不是基于函數的組件進行開發，當涉及到狀態管理時，確實有一些開箱即用的優勢，對我來說，最主要的是舊狀態與新狀態的合并。React  Docs for  State提供了React.Component中內置的狀態合并功能的良好示例。雖然該功能沒有直接內置到鉤子中，但我們可以通過一個簡單的自定義鉤子來復制這種行為，它可以替換我們的  useState 調用，給我們同樣的行為。

function useMergeState(initialState) {   const [state, setState] = useState(initialState);   // 使用 useRef 來改進異步調用 setState 時的功能。   const stateRef = useRef(state);    function setRefState(newState) {       stateRef.current = newState;       return setState(newState);   }    function mergeState(newState) {     var finalState = newState;     /**      * 判斷狀態數據類型是否匹配，如果匹配，則繼續合并，      * 如果不匹配，則拋出一個控制臺警告，用新的狀態覆蓋。      */     if (typeof stateRef.current !== typeof newState) {       console.warn(         "useMergeState warning: 狀態數據類型不匹配，用新的狀態覆蓋狀態。"       );       finalState = newState;     } else {       /**        * 在此處理合并        */       if (typeof stateRef.current == "object" && !Array.isArray(stateRef.current)) {         // 現有狀態是一個對象，繼續嘗試合并         if (typeof newState == "object" && !Array.isArray(newState)) {           finalState = { ...stateRef.current, ...newState };         }       }     }      return setRefState(finalState);   }    return [stateRef.current, mergeState]; }

4. 考慮拆分Hook

無論組件的復雜程度如何，我總是建議使用自定義鉤子;然而，在構建自定義鉤子時，將一個過于復雜的鉤子分割成多個較簡單的鉤子是非常有用的。在我的項目中，我喜歡根據功能來拆分鉤子邏輯，比如說，把一個鉤子拆成邏輯上的狀態子集，比如數據/Web  API交互的鉤子和顯示狀態的單獨的鉤子，可能會有好處。回想一下鉤子返回部分的例子鉤子，這樣拆開來可能會有幫助。

function useDataHook() {   const [dataState, setDataState] = useState({     serverData: {},     selections: {}   });      return dataState; }  function useDisplayHook() {   const [viewState, setViewState] = useState({     menuExpanded: false,     submitFormData: {}   })      const toggleMenuExpand = () => {     setViewState({       menuExpanded: !viewState.menuExpanded,       submitFormData: viewState.submitFormData     })   }      return {     viewState: viewState,     toggleMenuExpand: toggleMenuExpand }  function BasicComponent(){   const data = useDataHook();   const display = useDisplayHook();      return <div>     </div> }

拆分后的示例掛鉤

5. 評估 useEffect 調用，以防止不必要的重新渲染

useEffect鉤子非常有用，但是如果使用不當，可能會導致過度渲染。查看自定義鉤子時，值得評估你的useEffect調用。我喜歡遵守以下經驗法則：

如果一個 useEffect 在同一個鉤子作用域中監聽狀態變量，那么這個效果不應該更新狀態本身。

如果你有多個useEffect語句在偵聽同一組變量，請考慮將它們組合在一起。

盡管結合使用 useEffects 有助于減少重新渲染次數，但首先要優先考慮代碼的可讀性。

感謝各位的閱讀，以上就是“簡化React Hook的方法有哪些”的內容了，經過本文的學習后，相信大家對簡化React Hook的方法有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！