React-防抖

2023-10-31

// React实际操作
// 两个事件 onMouseOver 和 onMouseOut

HTML:
	<div
		className='demo'
		onMouseOver={() => this.onMouseOver(record)}
		onMouseOut={this.onMouseOut}
	>

constructor:
	constructor () {
		super()
		this.state = {}
		this.onMouseOver = this.debounce(this.onMouseOver, 100)
    	this.onMouseOut = this.debounce(this.onMouseOut, 100)
	}

防抖方法:
debounce = (func, wait) => {
	let timeout
	return function () {
		let args = arguments
		clearTimeout(timeout)
		timeout = setTimeout(function () {
			func.apply(this, args)
		}, wait)
	}
}

onMouseOver = () => {
	console.log('鼠标移入回调')
}

onMouseOut = () => {
	console.log('鼠标移出回调')
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React-防抖 的相关文章

  • 函数式组件与类组件有何不同?

    与React类组件相比 React函数式组件究竟有何不同 在过去一段时间里 典型的回答是类组件提供了更多的特性 比如state 当有了Hooks后 答案就不再是这样了 或许你曾听过它们中的某一个在性能上的表现优于另一个 那是哪一个 很多此类
  • 对Fiber架构的理解?解决了什么问题?

    一 问题 JavaScript引擎和页面渲染引擎两个线程是互斥的 当其中一个线程执行时 另一个线程只能挂起等待 如果 JavaScript 线程长时间地占用了主线程 那么渲染层面的更新就不得不长时间地等待 界面长时间不更新 会导致页面响应度
  • state和props的区别__react

    首先说明 state和props是每个组件都有的 其次 state可变 但props不可变 这是官网给出的说法 但实操过程中 state的确可变 但props也可以变 是不是fb搞错了 当然不是 这里的可变与不可变 说的是改变后 是否会重新
  • styled-components 的用法

    用于给标签或组件添加样式 给标签或组件添加样式 import styled from styled components styled button 给button标签添加样式 const Button styled button back
  • 配置使用Eslint的时候 版本错误 "eslint": "5.6.0" a different version of eslint was detected higher up in the tr

    1 如果你也遇到下面的问题 你可以 按照命令行提示的那样 下面这四步完成的一般就可以了 但是不排除你在运行的时候忘记下载某些依赖 1 删除 package lock json 不是package json 你可以选择 yarn lock 或
  • react基础--组件通讯:props基础、子传父、父传子、兄弟组件通讯、context跨级组件、props进阶

    目录 一 props基础 1 1 概述 1 2 函数组件通讯 1 2 1 基本用法 1 2 1 对象数据传递 1 3 类组件通讯 1 4 props的特点 二 组件通讯三种方式 2 1 父传子 2 2 子传父 2 3 兄弟组件通讯 三 co
  • react 使用 scss

    react 使用 scss 日常记录开发中遇到的坑 1 使用 npm install sass loader node sass S 进行安装 2 在页面中直接使用 有时候可以 有时候不行 原因 我个人觉得安装的两个插件本版兼容问题 nod
  • Vite搭建react+ts项目

    创建一个react项目 首先需要打开终端 进行vite的引入 yarn create vite 使用react模板创建项目 yarn create vite react test template react cd react test y
  • 三分钟实现一个react-router-dom5.0的路由拦截(导航守卫)

    不同于vue 通过在路由里设置meta元字符实现路由拦截 在使用 Vue 框架提供了路由守卫功能 用来在进入某个路有前进行一些校验工作 如果校验失败 就跳转到 404 或者登陆页面 比如 Vue 中的 beforeEnter 函数 rout
  • react组件状态同步-状态提升

    假设定义组件TemperatureInputSon import React from react class TemperatureInputSon extends React Component constructor props su
  • React-(4)React中的事件绑定

    React中的事件绑定 在 React 组件中 每个方法的上下文都会指向该组件的实例 即自动绑定 this 为当前组件 而且 React 还会对这种引用进行缓存 以达到 CPU 和内存的最优化 在使用 ES6 classes 或者纯函数时
  • Ant Design Pro从零到一(认识AntD)

    废话 在我们第一次接触AntD的时候 会遇到两个东西 一个是Ant Design 另一个是Ant Design Pro 他们的官网分别是 Ant Design 一套企业级 UI 设计语言和 React 组件库 Ant Design Pro
  • hook中使用ref使用

    对于antd的fom表单 hook使用ref import React useState useEffect useRef from react const dateRef useRef dateRef current setFieldsV
  • React(一):React的设计哲学 - 简单之美

    React 一 React的设计哲学 简单之美 React 二 React开发神器Webpack React 三 理解JSX和组件 React 四 虚拟DOM Diff算法解析 React 五 使用Flux搭建React应用程序架构 Rea
  • Umi+Dva初印象<基础应用,结构,流转逻辑>

    目录 前言 知识储备 generator函数 Dva初识 实际交互 函数式组件 class组件 前言 项目初始为umi脚手架进行初始化 lt 初始化过程 http t csdn cn cuTaY gt 工程中加载了umi自带的antd ui
  • React解密:React Hooks函数之useCallback和useMemo

    之所以将useCallback和useMemo放到一起 从某种意义上说 他们都是性能优化的始作俑者 他们也有很多的共性 我们先来回顾一下class组件性能优化的点 调用 setState 就会触发组件的重新渲染 无论前后 state 是否相
  • React核心概念:状态提升

    上一节 表单 下一节 组合vs继承 React核心概念 状态提升 引言 添加第二个输入框 编写转换函数 状态提升 经验总结 引言 很多情况下我们使用的多个组件需要对同一个数据做出对应的反应 在这里我们推荐把这个共享的状态提升到距离这些组件最
  • 【react】回调函数形式的ref

    回调函数有3个特点 是我定义的函数 我没有调用这个函数 在我没有调用的情况下这个函数自己执行了 ref绑定一个箭头函数作为回调函数 可以输出以下这段看下 ref绑定的箭头函数是会自己执行的 class Demo extends React
  • React、Vue2.x、Vue3.0的diff算法

    前言 本文章不讲解 vDom 实现 mount 挂载 以及 render 函数 只讨论三种 diff 算法 VNode 类型不考虑 component functional component Fragment Teleport 只考虑 E
  • 【React】 4课 react初识组件

    首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件 npm init y npm i babel standalone D npm i react react dom D 安装配置文件教程链接 https blog cs

随机推荐

  • 程序员面试题精选100题(44)-数值的整数次方

    程序员面试题精选100题 44 数值的整数次方 题目 实现函数double Power double base int exponent 求base的exponent次方 不需要考虑溢出 方法一 由于输入的exponent是个int型的数值
  • AR-虚实融合文献阅读整理(二)

    一 增强现实中虚实融合和人机交互技术的研究与应用 黄震宇 基于标志物的识别 利用opencv和三维图形引擎OGRE实现虚实融合展示系统 人机交互方案采用PrimeSense的深度摄像头 通过计算机视觉处理 重建了人体三维谷歌系统定义体感语义
  • C++:CMake常用变量【CMAKE_CXX_FLAGS、CMAKE_BUILD_TYPE、×_BINARY_DIR】

    CMake共用七种变量 如下所示 提供信息的变量 控制变量 描述系统的变量 控制构建过程的变量 语言变量 CTest变量 CPack变量 一 CMake变量引用的方式 使 进 变量的引 在 IF 等语句中 是直接使 变量名 不通过 取值 二
  • Linux系统中/etc/rc.local和/etc/rc.d/rc.local的区别

    etc rc d rc local 用于添加开机启动命令 etc rc local是 etc rc d rc local的软连接 转载于 https www cnblogs com Samuel Leung p 10477162 html
  • 【Spring

    上文讲了 Spring 资源处理 本文讲一下resource的扩展接口相关 资源处理扩展 ResourceLoader 接口 定义 图解 示例 策略 ResourcePatternResolver接口 ResourceLoaderAware
  • 实例修改类属性python_Python类属性和实例属性的优先级

    可以看到 属性可以分为类属性和实例属性 那么问题就来了 如果类属性和实例属性名字相同时 会怎么样 这就涉及Python中类属性和实例属性的优先级的问题了 我们可以做一个实验 在前面类定义的基础上 在实例属性中 也初始化一个localtion
  • DS18B20温度传感器原理及使用教程

    1 芯片简介 DS18B20数字温度传感器提供9 Bit到12 Bit的摄氏温度测量精度和一个用户可编程的非易失性且具有过温和低温触发报警的报警功能 DS18B20采用的1 Wire通信即仅采用一个数据线 以及地 与微控制器进行通信 该传感
  • Linux下安装/使用mariadb

    文章目录 第一章 mariadb在rhel7上的使用 第二章 mariadb在rhel6上的安装 1 编译源码包 比较慢 2 二进制包安装 比较推荐 第一章 mariadb在rhel7上的使用 rhel7及以上系统默认安装了mariadb
  • C#基础入门之数据类型

    一 值类型和引用类型 在C 中数据类型总共可以分为两类 分别是值类型和引用类型 值类型 表示复制一个当前变量传给方法 当你在这个方法中改变这个变量的值时 最初生命的变量的值不会变 引用类型 表示你操作的数据是同一个 也就是说当你传一个参数给
  • 物联网面试必过要点

    要是能熟记以下知识点 再加上自身的项目经验 过个面试 问题不大 指针定义 一个指向指针的的指针 它指向的指针是指向一个整型数 int a 一个有10个指针的数组 该指针是指向一个整型数的 int a 10 一个指向有10个整型数数组的指针
  • bind的原理和bind的实现

    一 bind的特性 传递的第一个参数做为调用它的函数的this指向 bind可传递若干参数 若第一个参数传递基础数据类型 则调用他的函数的this指向该基础数据类型的包装类实例化对象 若第一个参数为null或undefined 则调用他的函
  • 数据库操作 - 关系模型

    关系数据库是建立在关系模型上的 而关系模型本质上就是若干个存储数据的二维表 可以把它们看作很多Excel表 gt 表的每一行称为记录 Record 记录是一个逻辑意义上的数据 gt 表的每一列称为字段 Column 同一个表的每一行记录都拥
  • 并查集、树状数组

    并查集 树状数组 线段树 并查集 树状数组 树状数组1 单点修改 区间查询 树状数组2 单点查询 区间修改 并查集 模板 并查集 题目描述 如题 现在有一个并查集 你需要完成合并和查询操作 输入格式 第一行包含两个整数 N M N M N
  • 清华镜像用法

    用pip安装模块时 总是会报错 大片红字 请求超时 影响心情 如果使用镜像安装 就会很顺 敲一下回车键 一两秒就搞定 节约时间 平常简单用法是 pip install beautifulsoup4 加入镜像参数后 pip install b
  • 任意进制转换(c++)

    include
  • OpenHarmony源码解析(12): hisysevent

    1 概述 HiSysEvent是面向OpenHarmony系统开发者提供的系统打点功能 通过在关键路径埋点来记录系统在运行过程中的重要信息 辅助开发者定位问题 此外还支持开发者将打点数据上传到云进行大数据质量度量 HiSysEvent包括H
  • 并查集的妙用——Leetcode 1202

    并查集的妙用 Leetcode 1202 给你一个字符串 s 以及该字符串中的一些 索引对 数组 pairs 其中 pairs i a b 表示字符串中的两个索引 编号从 0 开始 你可以 任意多次交换 在 pairs 中任意一对索引处的字
  • Springboot-data-redis结合SpringCache的使用

    spring boot data redis 与 Caache的结合使用 一 springboot data redis操作redis 二 结合Spring Cache 的使用 一 springboot data redis操作redis
  • kali与Windows安装双系统,grub引导器安装失败,或安装grub后无法引导kali系统问题解决

    1 先看问题 安装失败图片 这个时候不要慌 既然它的自动安装无法搞定 那我们就手动安装grub引导器 注意 本人电脑环境是 windows10 分区表类型是GPT类型 尝试安装kali双系统出现grub引导器错误 不同环境下解决方法可能会有
  • React-防抖

    React实际操作 两个事件 onMouseOver 和 onMouseOut HTML div gt this onMouseOver record onMouseOut this onMouseOut gt constructor co