脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React中事件节流防抖

通过实例学习React中事件节流防抖

 更新时间：2019年06月17日 11:35:00   作者：谁把月亮涂黑啦  
这篇文章主要介绍了通过实例学习React中事件节流防抖，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下

节流

方法一

import Throttle from 'lodash-decorators/throttle';
export default class Search extends Component {
constructor(props) {
super(props)
this.handleSearch = this.handleSearch.bind(this);
}
handleSubmit = (e) => {
e.preventDefault();
this.handleSearch();
}
@Throttle(300)
handleSearch() {
...
}
render() {
return (
<form onSubmit={this.handleSubmit}><form>
)
}
}

方法二

import throttle from 'lodash/throttle';
export default class Search extends Component {
constructor(props) {
super(props)
this.handleSearch = throttle(this.handleSearch, 1000);
}
handleSubmit = (e) => {
e.preventDefault();
this.handleSearch();
}
handleSearch = () => {
...
}
render() {
return (
<form onSubmit={this.handleSubmit}><form>
)
}
}

防抖

写法类似。。。

区别

debounce 和 throttle 各有特点，在不同的场景要根据需求合理的选择。如果事件触发是高频但是有停顿时，可以选择debounce；在事件连续不断高频触发时，只能选择 throttle ，因为 debounce 可能会导致一段时间内动作只被执行一次，界面出现闪烁。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • React自定义视频全屏按钮实现全屏功能

    React自定义视频全屏按钮实现全屏功能

    这篇文章主要介绍了React自定义视频全屏按钮实现全屏功能，通过绘制全屏按钮，并绑定点击事件，编写点击事件，通过实例代码给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • react navigation中点击底部tab怎么传递参数

    react navigation中点击底部tab怎么传递参数

    本文主要介绍了react navigation中点击底部tab怎么传递参数,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • React 错误边界Error Boundary使用示例解析

    React 错误边界Error Boundary使用示例解析

    这篇文章主要为大家介绍了React 错误边界Error Boundary使用示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • react配置webpack-bundle-analyzer项目优化踩坑记录

    react配置webpack-bundle-analyzer项目优化踩坑记录

    这篇文章主要介绍了react配置webpack-bundle-analyzer项目优化踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • React 18中的state概念与使用、注意问题解决

    React 18中的state概念与使用、注意问题解决

    state和props类似，都是一种存储属性的方式，但是不同点在于state只属于当前组件，其他组件无法访问，这篇文章主要介绍了React 18中的state概念与使用、注意问题，需要的朋友可以参考下
    2022-12-12
  • React 非父子组件传参的实例代码

    React 非父子组件传参的实例代码

    React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。本文给大家介绍React 非父子组件传参的相关知识，感兴趣的朋友跟随一起看看吧
    2021-04-04
  • 详解React中的setState执行机制

    详解React中的setState执行机制

    setState是React组件中用于更新状态的方法,是类组件中的方法,用于更新组件的状态并重新渲染组件,本文给大家详细介绍了React中的setState执行机制,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • react quill中图片上传由默认转成base64改成上传到服务器的方法

    react quill中图片上传由默认转成base64改成上传到服务器的方法

    这篇文章主要介绍了react quill中图片上传由默认转成base64改成上传到服务器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • React中的setState使用细节和原理解析(最新推荐)

    React中的setState使用细节和原理解析(最新推荐)

    这篇文章主要介绍了React中的setState使用细节和原理解析(最新推荐),前面我们有使用过setState的基本使用, 接下来我们对setState使用进行详细的介绍，需要的朋友可以参考下
    2022-12-12
  • react.js CMS 删除功能的实现方法

    react.js CMS 删除功能的实现方法

    下面小编就为大家带来一篇react.js CMS 删除功能的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04

最新评论