每天一个hooks学习之useUpdateEffect

更新时间：2023年05月09日 09:35:57 作者：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,
) =&gt; {
  let isFirst = useRef(true);
  useEffect(() =&gt; {
    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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React 组件中 State 的定义、使用及正确使用方式
本文详细介绍了React组件中的state概念,包括其定义、使用方式以及如何正确更新state,通过ES6和ES7类组件的示例,展示了如何在React中定义和使用state,感兴趣的朋友跟随小编一起看看吧
2024-11-11
React之echarts-for-react源码解读
这篇文章主要介绍了React之echarts-for-react源码解读,echarts-for-react的源码非常精简，本文将针对主要逻辑分析介绍，需要的朋友可以参考下
2022-10-10
浅谈react-router@4.0 使用方法和源码分析
这篇文章主要介绍了浅谈react-router@4.0 使用方法和源码分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
react装饰器与高阶组件及简单样式修改的操作详解
这篇文章主要介绍了react装饰器与高阶组件及简单样式修改的操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
React实践之Tree组件的使用方法
本篇文章主要介绍了React实践之Tree组件的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
如何使用Redux Toolkit简化Redux
redux-toolkit是目前redux官方推荐的编写redux逻辑的方法，针对redux的创建store繁琐、样板代码太多、依赖外部库等问题进行了优化，官方总结了四个特点是简易的/有想法的/强劲的/高效的，总结来看，就是更加的方便简单了
2022-12-12
React父组件数据实时更新了,子组件没有更新的问题
这篇文章主要介绍了React父组件数据实时更新了,子组件没有更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React-Native之截图组件react-native-view-shot的介绍与使用小结
这篇文章主要介绍了React-Native之截图组件react-native-view-shot的介绍与使用小结,需本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，要的朋友可以参考下
2021-08-08
react:swr接口缓存案例代码
useSWR 是一个 React Hooks,是 HTTP 缓存库 SWR 的核心方法之一,SWR 是一个轻量级的 React Hooks 库,通过自动缓存数据来实现 React 的数据获取,本文给大家介绍react:swr接口缓存案例详解,感兴趣的朋友一起看看吧
2023-11-11
React useEffect使用教程
useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合
2022-10-10