每天一個hooks學習之useUpdateEffect
先講點廢話
useUpdateEffect
用法等同于 useEffect
,但是會忽略首次執(zhí)行,只在依賴更新時執(zhí)行。
有些場景我們不想在首次渲染時就執(zhí)行 effect,比如搜索時,只在 keyword 變化時才調用 search 方法。這個hooks在平時工作中也用的比較多的,所以我們來寫寫它的源碼還是很有必要的??。
??來看看效果
可以看到,第一次只有useEffect會打印count,只有count變化時,useUpdateEffect
才會打印出count
??源碼實現(xiàn)
import React, { useEffect, useRef } from 'react'; const useUpdateEffect = ( effect: React.EffectCallback, deps: React.DependencyList, ) => { let isFirst = useRef(true); useEffect(() => { if (isFirst.current) { isFirst.current = false; return; } return effect(); }, [deps]); };
??完整demo源碼
import React, { useEffect, useRef } from 'react'; import { Button } from 'antd'; const useUpdateEffect = ( effect: React.EffectCallback, deps: React.DependencyList, ) => { let isFirst = useRef(true); useEffect(() => { if (isFirst.current) { isFirst.current = false; return; } return effect(); }, [deps]); }; const Demo = () => { const [count, setCount] = React.useState(0); useEffect(() => { console.log('useEffect的count', count); }, [count]); useUpdateEffect(() => { console.log('useUpdateEffect的count', count); }, [count]); return ( <> <div>Count: {count}</div> <Button type="primary" onClick={() => setCount(count + 1)}> 點我+ 1 </Button> </> ); }; export default Demo;
??參考
有興趣的小伙伴可以去看,react-use 和 ahooks 的源碼,學習前輩們優(yōu)雅的代碼??。
以上就是每天一個hooks學習之useUpdateEffect的詳細內容,更多關于hooks學習useUpdateEffect的資料請關注腳本之家其它相關文章!
相關文章
jenkins分環(huán)境部署vue/react項目的方法步驟
這篇文章主要介紹了jenkins分環(huán)境部署vue/react項目的方法,本文分步驟給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02解決react-connect中使用forwardRef遇到的問題
這篇文章主要介紹了解決react-connect中使用forwardRef遇到的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05