React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > hooks学习useUpdateEffect

每天一个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-useahooks 的源码,学习前辈们优雅的代码😍。

以上就是每天一个hooks学习之useUpdateEffect的详细内容,更多关于hooks学习useUpdateEffect的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文