在編寫自定義Hook時，很容易產生過于復雜的解決方案。這有時會導致不穩定的行為，創建無用的重新渲染，或者只是使其更難維護。考慮到這一點，我想分享5種我發現的幫助簡化定制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> 
} 

拆分后的示例掛鉤

[[328037]]

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

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

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

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

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