• react实现自定义hooks(节流和防抖)


    实现思路

    自定义hooks+setTimeout组合,基本实现很简单,只要理解了节流和防抖是什么就很容易实现了。防抖和节流都是对高频触发的事件来做的一种应对手段,我认为它们最本质的区别是是否需要对最终的结果负责,比如防抖的目的即是为了拿到最终的结果,所以前面不管触发多少次,我们都可以不管,只等到它不再触发了才做最后的处理。而节流是对相同事件的触发频率的控制,它触发的次数不会造成不同的结果。

    在线预览

    https://codesandbox.io/s/usehooks-vki3p

    核心代码

    useThrottle

    import { useCallback, useRef } from "react";
    
    export default function useThrottle(fn, delay) {
      const timer = useRef(-1);
      const throttle = useCallback(() => {
        if (timer.current > -1) {
          return;
        }
        timer.current = setTimeout(() => {
          fn();
          timer.current = -1;
          clearTimeout(timer.current);
        }, delay);
      }, [fn, delay]);
      return throttle;
    }
    

    useDebounce

    import { useEffect, useState } from "react";
    
    export default function useDebounce(value, delay) {
      const [debouncedValue, setDebouncedValue] = useState(value);
      useEffect(() => {
        const handler = setTimeout(() => {
          setDebouncedValue(value);
        }, delay);
        return () => {
          clearTimeout(handler);
        };
      }, [value, delay]);
      return debouncedValue;
    }
    
    
  • 相关阅读:
    redis_String
    redis单线程架构
    redis数据结构与内部编码
    常用命令
    Tomcat:web服务器软件
    mysql数据库-备份与还原实操
    mysql数据库-备份方式简介与规范
    mysql数据库-日志管理
    mysql数据库-简介
    在 Kubernetes 集群在线部署 KubeSphere
  • 原文地址:https://www.cnblogs.com/xingguozhiming/p/15777917.html
Copyright © 2020-2023  润新知