每天一个hooks学习之useUpdateEffect
作者:jimmy_fx
这篇文章主要为大家介绍了每天一个hooks学习之useUpdateEffect使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
先讲点废话
useUpdateEffect
用法等同于 useEffect
,但是会忽略首次执行,只在依赖更新时执行。
有些场景我们不想在首次渲染时就执行 effect,比如搜索时,只在 keyword 变化时才调用 search 方法。这个hooks在平时工作中也用的比较多的,所以我们来写写它的源码还是很有必要的🤓。
🦌来看看效果
可以看到,第一次只有useEffect会打印count,只有count变化时,useUpdateEffect
才会打印出count
🐿源码实现
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 的源码,学习前辈们优雅的代码😍。
以上就是每天一个hooks学习之useUpdateEffect的详细内容,更多关于hooks学习useUpdateEffect的资料请关注脚本之家其它相关文章!