useUpdateEffect狀態(tài)更新生命周期,給所有React的小伙伴

大廠技術(shù) ?? 高級前端 ?? Node進(jìn)階

點擊上方? 程序員成長指北 ，關(guān)注公眾號

回復(fù) 1 ，加入高級Node交流群

緣起

事情是這樣的。今天我要完成的一個功能模塊中有一個功能。這個功能需要我監(jiān)聽狀態(tài)的改變并做出反應(yīng)。

然后就有了以下代碼??

image.png

這種寫法有一個問題，代碼高度耦合。我發(fā)現(xiàn)，我所有的周期代碼都寫在一個函數(shù)里面。代碼量一多，這個函數(shù)會變得很不可讀。并且。在完成這個功能的時候。我還需要增加一個本來就可以不存在狀態(tài)并對他進(jìn)行邏輯判斷。我覺得這樣寫很不好，可讀性和可維護(hù)性一般都很一般。

image.png

有那么一瞬間，我有點懷念寫Vue的那些時光。懷念Vue的updated生命周期。

我希望React也會有一個類似于update的生命周期。可是他沒有。

image.png

為了不被這種膠著的邏輯繼續(xù)惡心下去，為了不被領(lǐng)導(dǎo)鄙視，也為了和同事裝杯。我自己封裝了一個useUpdateEffect。

image.png

useUpdateEffect

useUpdateEffect代碼實現(xiàn)

useUpdateEffect實現(xiàn)代碼??（附詳細(xì)注釋）

TS版本

      /**
?*?自定義hooks?
?*?
?*?用于彌補原先hook的不足
?*/

import?{?DependencyList,?EffectCallback,?useEffect,?useRef?}?from?"react";

//是否時第一次
const?isFirstRender?=?():?boolean?=>?{
????const?isFirst:?React.MutableRefObject<boolean>?=?useRef(true);?//不會因為重復(fù)?render?重復(fù)申明，?類似于類組件的?this.xxx
????const?{?current?}?=?isFirst;
????//如果是第一次，改變狀態(tài)并返回true
????if?(current)?{
????????isFirst.current?=?false;
????????return?true;
????}
????return?current;
}

//依賴更改時候生命周期
/**
?*?@param?effect?更新時所需要調(diào)用的函數(shù)
?*?@param?deps??更新的依賴
?*/
const?useUpdateEffect?=?(effect:?EffectCallback,?deps:?DependencyList):void?=>?{
????//是否是第一次更新
????const?isFirst:?boolean?=?isFirstRender();
????useEffect(()?=>?{
????????//如果不是第一次執(zhí)行函數(shù)
????????if?(!isFirst)?return?effect();
????},?deps);
}

export?{
????useUpdateEffect,?//update生命周期
};


復(fù)制代碼

    

useUpdateEffect實現(xiàn)代碼??（附詳細(xì)注釋)

JS版本

      
import?{?useEffect,?useRef?}?from?"react";

//是否時第一次
const?isFirstRender?=?()?=>?{
????const?isFirst?=?useRef(true);?//不會因為重復(fù)?render?重復(fù)申明，?類似于類組件的?this.xxx
????const?{?current?}?=?isFirst;
????//如果是第一次，改變狀態(tài)并返回true
????if?(current)?{
????????isFirst.current?=?false;
????????return?true;
????}
????return?current;
}

//依賴更改時候生命周期
/**
?*?@param?effect?更新時所需要調(diào)用的函數(shù)
?*?@param?deps??更新的依賴
?*/
const?useUpdateEffect?=?(effect,?deps)?=>?{
????//是否是第一次更新
????const?isFirst?=?isFirstRender();
????useEffect(()?=>?{
????????//如果不是第一次執(zhí)行函數(shù)
????????if?(!isFirst)?return?effect();
????},?deps);
}

export?{
????useUpdateEffect,?//update生命周期
};
復(fù)制代碼

    

上面的代碼，直接復(fù)制走就可以用。

useUpdateEffect使用方式

image.png

1. 引入
2. 使用

使用方式和useEffect沒有差別。賊拉方便。

image.png

實現(xiàn)原理

其實實現(xiàn)思想很簡單。

簡單說就是

設(shè)置一個狀態(tài)true，如果是第一次，則什么都不執(zhí)行并改變狀態(tài)為false。

第二次執(zhí)行判斷狀態(tài)是否為false，如果是，則執(zhí)行外部傳入的函數(shù)。

這里有一個需要注意的點是:如何防止我們設(shè)置的這個狀態(tài)true重復(fù)聲明。_useRef是個好東西。這個，可以阻止?fàn)顟B(tài)重復(fù)聲明。_

緣終

學(xué)海無涯，祝你好運。

關(guān)于本文

作者：工邊頁字

https://juejin.cn/post/7130923763281395726

    Node 社群
            

我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。

如果你覺得這篇內(nèi)容對你有幫助，我想請你幫我2個小忙：

1. 點個 「在看」 ，讓更多人也能看到這篇文章 2. 訂閱官方博客? www.inode.club? 讓我們一起成長

點贊和在看就是最大的支持 ??