建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
在編寫(xiě)自定義Hook時(shí)，很容易產(chǎn)生過(guò)于復(fù)雜的解決方案。這有時(shí)會(huì)導(dǎo)致不穩(wěn)定的行為，創(chuàng)建無(wú)用的重新渲染，或者只是使其更難維護(hù)?？紤]到這一點(diǎn)，我想分享5種我發(fā)現(xiàn)的幫助簡(jiǎn)化定制Hook的方法。
滿(mǎn)洲ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話(huà)聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！
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)先考慮代碼的可讀性。
文章標(biāo)題：簡(jiǎn)化ReactHook的5種方法
網(wǎng)頁(yè)地址：http://m.jiaoqi3.com/article/copddhe.html
