這篇文章主要講解了“簡(jiǎn)化React Hook的方法有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“簡(jiǎn)化React Hook的方法有哪些”吧！

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),龍馬潭企業(yè)網(wǎng)站建設(shè),龍馬潭品牌網(wǎng)站建設(shè),網(wǎng)站定制,龍馬潭網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,龍馬潭網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1. 減少 useState 數(shù)量

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

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

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

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

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

2. 利用你的Hook返回

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

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 
     
 }

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

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

• 如果hook在多個(gè)組件之間共享或作為庫(kù)共享，則在更新后提高h(yuǎn)ook版本的兼容性;

• 在使用Hook在組件頂部提供相同級(jí)別的Hook API時(shí)，仍然可以解構(gòu)對(duì)象。

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

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

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

function useMergeState(initialState) {   const [state, setState] = useState(initialState);   // 使用 useRef 來(lái)改進(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ù)類(lèi)型是否匹配，如果匹配，則繼續(xù)合并，      * 如果不匹配，則拋出一個(gè)控制臺(tái)警告，用新的狀態(tài)覆蓋。      */     if (typeof stateRef.current !== typeof newState) {       console.warn(         "useMergeState warning: 狀態(tài)數(shù)據(jù)類(lèi)型不匹配，用新的狀態(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

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

拆分后的示例掛鉤

5. 評(píng)估 useEffect 調(diào)用，以防止不必要的重新渲染

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

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

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

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

感謝各位的閱讀，以上就是“簡(jiǎn)化React Hook的方法有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)簡(jiǎn)化React Hook的方法有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！