通過實例學習React中事件節(jié)流防抖
更新時間：2019年06月17日 11:35:00 作者：誰把月亮涂黑啦
這篇文章主要介紹了通過實例學習React中事件節(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>
)
}
}
防抖
寫法類似。。。
區(qū)別
debounce 和 throttle 各有特點，在不同的場景要根據(jù)需求合理的選擇。如果事件觸發(fā)是高頻但是有停頓時，可以選擇debounce；在事件連續(xù)不斷高頻觸發(fā)時，只能選擇 throttle ，因為 debounce 可能會導致一段時間內(nèi)動作只被執(zhí)行一次，界面出現(xiàn)閃爍。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了React自定義視頻全屏按鈕實現(xiàn)全屏功能，通過繪制全屏按鈕，并綁定點擊事件，編寫點擊事件，通過實例代碼給大家詳細講解,需要的朋友可以參考下2022-11-11
react navigation中點擊底部tab怎么傳遞參數(shù)
本文主要介紹了react navigation中點擊底部tab怎么傳遞參數(shù),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
React?錯誤邊界Error?Boundary使用示例解析
這篇文章主要為大家介紹了React?錯誤邊界Error?Boundary使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
react配置webpack-bundle-analyzer項目優(yōu)化踩坑記錄
這篇文章主要介紹了react配置webpack-bundle-analyzer項目優(yōu)化踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
state和props類似，都是一種存儲屬性的方式，但是不同點在于state只屬于當前組件，其他組件無法訪問，這篇文章主要介紹了React?18中的state概念與使用、注意問題，需要的朋友可以參考下2022-12-12
React 主要用于構(gòu)建UI，很多人認為 React 是 MVC 中的 V（視圖）。本文給大家介紹React 非父子組件傳參的相關知識，感興趣的朋友跟隨一起看看吧2021-04-04
setState是React組件中用于更新狀態(tài)的方法,是類組件中的方法,用于更新組件的狀態(tài)并重新渲染組件,本文給大家詳細介紹了React中的setState執(zhí)行機制,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-12-12
react quill中圖片上傳由默認轉(zhuǎn)成base64改成上傳到服務器的方法
這篇文章主要介紹了react quill中圖片上傳由默認轉(zhuǎn)成base64改成上傳到服務器的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
React中的setState使用細節(jié)和原理解析(最新推薦)
這篇文章主要介紹了React中的setState使用細節(jié)和原理解析(最新推薦),前面我們有使用過setState的基本使用, 接下來我們對setState使用進行詳細的介紹，需要的朋友可以參考下2022-12-12
下面小編就為大家?guī)硪黄猺eact.js CMS 刪除功能的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04