首页 > 其他分享 >react防抖节流

react防抖节流

时间:2024-04-01 15:58:46浏览次数:87  
标签:delay 防抖 const 节流 react useState return useEffect

防抖
import React, { useState, useEffect } from 'react';

const DebounceExample = () => {
  const [inputValue, setInputValue] = useState('');
  
  useEffect(() => {
    const delay = 1000; // 设置防抖延迟时间为1秒
    const timer = setTimeout(() => {
      // 在延迟时间结束后执行相应操作,比如发送请求等
      console.log('Debounced input value:', inputValue);
    }, delay);

    return () => {
      clearTimeout(timer); // 在每次重新渲染前清除上一次的定时器
    };
  }, [inputValue]);

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleInputChange} placeholder="Type something..." />
    </div>
  );
};

export default DebounceExample;
节流
import React, { useState, useEffect } from 'react';

const ThrottleExample = () => {
  const [clickCount, setClickCount] = useState(0);
  const [throttled, setThrottled] = useState(false);

  const handleClick = () => {
    if (!throttled) {
      setClickCount(prevCount => prevCount + 1);
      setThrottled(true);
    }
  };

  useEffect(() => {
    const delay = 1000; // 设置节流时间间隔为1秒
    const timer = setTimeout(() => {
      setThrottled(false);
    }, delay);

    return () => {
      clearTimeout(timer); // 在每次重新渲染前清除上一次的定时器
    };
  }, [throttled]);

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Click count: {clickCount}</p>
    </div>
  );
};

export default ThrottleExample;

  

标签:delay,防抖,const,节流,react,useState,return,useEffect
From: https://www.cnblogs.com/zjxzhj/p/18108612

相关文章

  • 报错:react.development.js:1130 Uncaught Error: Objects are not valid as a React
      原因:是因为getControl我用了异步async的方法。而调用的时候,没有加上await导致的。 解决办法:加上await就可以了 ......
  • 使用React 18和WebSocket构建实时通信功能
    1.引言WebSocket是一种在Web应用中实现双向通信的协议。它允许服务器主动向客户端推送数据,而不需要客户端发起请求。在现代的实时应用中,WebSocket经常用于实时数据传输、聊天功能、实时通知和多人协作等场景。在本篇博客中,我们将探索如何在React18应用中使用WebSocket来......
  • 从虚拟dom知识无痛深入vue与react的原理
     我们都知道像vue、react都有用到虚拟dom,那么虚拟dom到底是什么?框架为什么不直接操作真实dom而要在中间要引入虚拟dom呢?vue和react的虚拟dom又有什么异同呢?我们就从虚拟dom开始讲起,再来逐步引入讲解vue与react的部分原理及其异同,这里会顺便讲解到数据驱动视图及视图驱动数据,......
  • React Native简介和环境配置,差点挂在第四面
    ReactNative目前需要NodeJS5.0或更高版本。本文发布时Homebrew默认安装的是最新版本,一般都满足要求。brewinstallnode安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!npmconfig......
  • react路径别名@配置
    首先下载包craconpmi-D @craco/craco1.路径解析在项目根目录下创建craco.config.js配置如下2.vscode识别配置在项目根目录下创建jsconfig.json,配置如下3. package.json将start和build的内容改成craco,重启项目 ......
  • react + electron 应用在线更新功能记录
    这个东西很多人都可能用electron-update这个玩意,但是我用了,发现总是更新不了,于是放弃,使用electron自带功能  主进程main.js中引入 const{autoUpdater}=require('electron-updater'); 以下为主要代码,也是放在main.js  autoUpdater.autoDownload=false......
  • React基础及React项目
    JSX在React中使用JSX语法(JavaScript扩展)描述用户界面,在React代码执行之前,Babel会将JSX语法转换为标准的JavaScriptAPI。JSX语法就是一种语法糖。让开发人员舒服JSX不同于vue模板的属性值为JavaScript表达式,属性值外面加大括号。constelement=<imgsrc={user......
  • React - 子组件向父组件通信
    本质是利用回调函数进行子向父通信,子组件通过触发由父组件传递的prop函数,并传递数据,父组件执行该prop函数内的回调函数。file:[父子通信]functionSon({onGetMsg}){//1.数据由子组件提供,向父组件传值constsonMsg="thisissonmsg";return(<div>......
  • 使用 CRXJS、Vite、TypeScript、React、Zustand、Antd 开发 Chrome 浏览器插件——自
    一、CRXJS一、什么是CRXJS?CRXJSVitePlugin是一款使用现代Web开发技术制作Chrome扩展的工具二、CRXJS的作用CRXJS支持热加载和静态资源导入,无需手动构建配置工具CRXJSVite插件通过将Vite的精细功能与简单的配置策略相结合,简化了Chrome扩展开发者体验二......
  • React组件封装:文字、表情评论框
    1.需求描述根据项目需求,采用Antd组件库需要封装一个评论框,具有以下功能:支持文字输入支持常用表情包选择支持发布评论支持自定义表情包2.封装代码 ./InputComment.tsx1importReact,{useState,useRef,useEffect,forwardRef,useImperativeHandle}from'r......