在編寫自定義Hook時(shí)，很容易產(chǎn)生過于復(fù)雜的解決方案。這有時(shí)會(huì)導(dǎo)致不穩(wěn)定的行為，創(chuàng)建無用的重新渲染，或者只是使其更難維護(hù)?？紤]到這一點(diǎn)，我想分享5種我發(fā)現(xiàn)的幫助簡化定制Hook的方法。

1. 減少 useState 數(shù)量

當(dāng)你使用hook進(jìn)行開發(fā)時(shí)，很容易使用過多的 useState 調(diào)用，或者將所有的狀態(tài)縮減為單一的、過于復(fù)雜的 useState。提高h(yuǎn)ook的可讀性的最好方法之一就是優(yōu)先考慮你的 useState 調(diào)用。我喜歡在我寫的鉤子中遵循一些關(guān)于狀態(tài)實(shí)現(xiàn)的規(guī)則。

(1) 優(yōu)先考慮易讀性

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

(2) 評(píng)估狀態(tài)對(duì)象的內(nèi)容

組件從一開始就沒有被完美地規(guī)劃過，隨著組件的增長，你的 useState 中包含的屬性可能也會(huì)變得越來越復(fù)雜。在整個(gè)開發(fā)周期中，我強(qiáng)烈建議評(píng)估你的 useState 調(diào)用的內(nèi)容，以確定將狀態(tài)部分分成其他 useState 調(diào)用是否有意義。你可能想按功能或類型對(duì)狀態(tài)值進(jìn)行分組。一般來說，我喜歡把狀態(tài)數(shù)據(jù)按照我認(rèn)為通常會(huì)一起更新的屬性來分組，或者按照狀態(tài)屬性的功能來分組，比如數(shù)據(jù)和視圖屬性。

2. 利用你的Hook返回

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

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> 
} 

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

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> 
} 

將返回值轉(zhuǎn)換為對(duì)象還有其他好處，包括：

• 如果hook在多個(gè)組件之間共享或作為庫共享，則在更新后提高h(yuǎn)ook版本的兼容性;
• 在使用Hook在組件頂部提供相同級(jí)別的Hook API時(shí)，仍然可以解構(gòu)對(duì)象。

還有一件很酷的事情，你可以用你的鉤子返回，就是在你的狀態(tài)中創(chuàng)建基于組件工廠函數(shù)的小狀態(tài)。這提供了一種很好的方式，可以將組件構(gòu)建器共享給實(shí)現(xiàn)鉤子的組件，而無需將狀態(tài)公開給該組件。

3. 使用合并鉤子簡化 setState 調(diào)用

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

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

4. 考慮拆分Hook

無論組件的復(fù)雜程度如何，我總是建議使用自定義鉤子;然而，在構(gòu)建自定義鉤子時(shí)，將一個(gè)過于復(fù)雜的鉤子分割成多個(gè)較簡單的鉤子是非常有用的。在我的項(xiàng)目中，我喜歡根據(jù)功能來拆分鉤子邏輯，比如說，把一個(gè)鉤子拆成邏輯上的狀態(tài)子集，比如數(shù)據(jù)/Web API交互的鉤子和顯示狀態(tài)的單獨(dú)的鉤子，可能會(huì)有好處?；叵胍幌裸^子返回部分的例子鉤子，這樣拆開來可能會(huì)有幫助。

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. 評(píng)估 useEffect 調(diào)用，以防止不必要的重新渲染

useEffect鉤子非常有用，但是如果使用不當(dāng)，可能會(huì)導(dǎo)致過度渲染。查看自定義鉤子時(shí)，值得評(píng)估你的useEffect調(diào)用。我喜歡遵守以下經(jīng)驗(yàn)法則：

如果一個(gè) useEffect 在同一個(gè)鉤子作用域中監(jiān)聽狀態(tài)變量，那么這個(gè)效果不應(yīng)該更新狀態(tài)本身。

如果你有多個(gè)useEffect語句在偵聽同一組變量，請(qǐng)考慮將它們組合在一起。

盡管結(jié)合使用 useEffects 有助于減少重新渲染次數(shù)，但首先要優(yōu)先考慮代碼的可讀性。