快捷導(dǎo)航

通過(guò)實(shí)例學(xué)習(xí)React中事件節(jié)流防抖

更新時(shí)間：2019年06月17日 11:35:00 作者：誰(shuí)把月亮涂黑啦

這篇文章主要介紹了通過(guò)實(shí)例學(xué)習(xí)React中事件節(jié)流防抖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下

節(jié)流

方法一

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>
)
}
}

防抖

寫(xiě)法類(lèi)似。。。

區(qū)別

debounce 和 throttle 各有特點(diǎn)，在不同的場(chǎng)景要根據(jù)需求合理的選擇。如果事件觸發(fā)是高頻但是有停頓時(shí)，可以選擇debounce；在事件連續(xù)不斷高頻觸發(fā)時(shí)，只能選擇 throttle ，因?yàn)?debounce 可能會(huì)導(dǎo)致一段時(shí)間內(nèi)動(dòng)作只被執(zhí)行一次，界面出現(xiàn)閃爍。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React自定義視頻全屏按鈕實(shí)現(xiàn)全屏功能
這篇文章主要介紹了React自定義視頻全屏按鈕實(shí)現(xiàn)全屏功能，通過(guò)繪制全屏按鈕，并綁定點(diǎn)擊事件，編寫(xiě)點(diǎn)擊事件，通過(guò)實(shí)例代碼給大家詳細(xì)講解,需要的朋友可以參考下
2022-11-11
react navigation中點(diǎn)擊底部tab怎么傳遞參數(shù)
本文主要介紹了react navigation中點(diǎn)擊底部tab怎么傳遞參數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
React?錯(cuò)誤邊界Error?Boundary使用示例解析
這篇文章主要為大家介紹了React?錯(cuò)誤邊界Error?Boundary使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
react配置webpack-bundle-analyzer項(xiàng)目?jī)?yōu)化踩坑記錄
這篇文章主要介紹了react配置webpack-bundle-analyzer項(xiàng)目?jī)?yōu)化踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
React?18中的state概念與使用、注意問(wèn)題解決
state和props類(lèi)似，都是一種存儲(chǔ)屬性的方式，但是不同點(diǎn)在于state只屬于當(dāng)前組件，其他組件無(wú)法訪問(wèn)，這篇文章主要介紹了React?18中的state概念與使用、注意問(wèn)題，需要的朋友可以參考下
2022-12-12
React 非父子組件傳參的實(shí)例代碼
React 主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。本文給大家介紹React 非父子組件傳參的相關(guān)知識(shí)，感興趣的朋友跟隨一起看看吧
2021-04-04
詳解React中的setState執(zhí)行機(jī)制
setState是React組件中用于更新?tīng)顟B(tài)的方法,是類(lèi)組件中的方法,用于更新組件的狀態(tài)并重新渲染組件,本文給大家詳細(xì)介紹了React中的setState執(zhí)行機(jī)制,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
react quill中圖片上傳由默認(rèn)轉(zhuǎn)成base64改成上傳到服務(wù)器的方法
這篇文章主要介紹了react quill中圖片上傳由默認(rèn)轉(zhuǎn)成base64改成上傳到服務(wù)器的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
React中的setState使用細(xì)節(jié)和原理解析(最新推薦)
這篇文章主要介紹了React中的setState使用細(xì)節(jié)和原理解析(最新推薦),前面我們有使用過(guò)setState的基本使用, 接下來(lái)我們對(duì)setState使用進(jìn)行詳細(xì)的介紹，需要的朋友可以參考下
2022-12-12
react.js CMS 刪除功能的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇react.js CMS 刪除功能的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04