脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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内部实现cache方法示例详解

    React内部实现cache方法示例详解

    这篇文章主要为大家介绍了React内部实现cache方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • React Hooks项目实战

    React Hooks项目实战

    React Hooks是React 16.8版本引入的新特性,它使得在函数组件中也能够使用状态（state）和其他React特性,本文就来详细介绍一下React Hooks项目实战,感兴趣的可以了解一下
    2023-11-11
  • 一文详解如何使用React监听网络状态

    一文详解如何使用React监听网络状态

    在现代Web应用程序中，网络连接是至关重要的，通过监听网络状态，我们可以为用户提供更好的体验，例如在断网时显示有关网络状态的信息，本文将介绍如何使用React监听网络状态的变化，并提供相应的代码示例
    2023-06-06
  • React组件的生命周期详细描述

    React组件的生命周期详细描述

    本篇文章主要介绍了React组件生命周期，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2021-10-10
  • React-Router v6实现页面级按钮权限示例详解

    React-Router v6实现页面级按钮权限示例详解

    这篇文章主要介绍了使用 reac+reactRouter来实现页面级的按钮权限功能,这篇文章分三部分,实现思路、代码实现、踩坑记录,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2023-10-10
  • react组件实例属性state详解

    react组件实例属性state详解

    这篇文章主要介绍了react组件实例属性state,有状态state的组件称作复杂组件,没有状态的组件称为简单组件，状态里存储数据,数据的改变驱动页面的展示，本文结合实例代码给大家详细讲解，需要的朋友可以参考下
    2023-02-02
  • react实现页面水印效果的全过程

    react实现页面水印效果的全过程

    大家常常关注的是网站图片增加水印,而很少关注页面水印,其实这个需求也是比较常见的,比如公文系统、合同系统等,这篇文章主要给大家介绍了关于react实现页面水印效果的相关资料,需要的朋友可以参考下
    2021-09-09
  • React+Mobx基本使用、模块化操作

    React+Mobx基本使用、模块化操作

    React 和 MobX 是一对强力组合，React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染，而MobX提供机制来存储和更新应用状态供 React 使用，这篇文章主要介绍了React+Mobx基本使用、模块化,需要的朋友可以参考下
    2022-09-09
  • React利用路由实现登录界面的跳转

    React利用路由实现登录界面的跳转

    这篇文章主要介绍了React利用路由实现登录界面的跳转，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 在react项目中使用antd的form组件,动态设置input框的值

    在react项目中使用antd的form组件,动态设置input框的值

    这篇文章主要介绍了在react项目中使用antd的form组件,动态设置input框的值，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论