通過實例學(xué)習(xí)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 可能會導(dǎo)致一段時間內(nèi)動作只被執(zhí)行一次,界面出現(xiàn)閃爍。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React內(nèi)部實現(xiàn)cache方法示例詳解
這篇文章主要為大家介紹了React內(nèi)部實現(xiàn)cache方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11一文詳解如何使用React監(jiān)聽網(wǎng)絡(luò)狀態(tài)
在現(xiàn)代Web應(yīng)用程序中,網(wǎng)絡(luò)連接是至關(guān)重要的,通過監(jiān)聽網(wǎng)絡(luò)狀態(tài),我們可以為用戶提供更好的體驗,例如在斷網(wǎng)時顯示有關(guān)網(wǎng)絡(luò)狀態(tài)的信息,本文將介紹如何使用React監(jiān)聽網(wǎng)絡(luò)狀態(tài)的變化,并提供相應(yīng)的代碼示例2023-06-06React-Router v6實現(xiàn)頁面級按鈕權(quán)限示例詳解
這篇文章主要介紹了使用 reac+reactRouter來實現(xiàn)頁面級的按鈕權(quán)限功能,這篇文章分三部分,實現(xiàn)思路、代碼實現(xiàn)、踩坑記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助2023-10-10React利用路由實現(xiàn)登錄界面的跳轉(zhuǎn)
這篇文章主要介紹了React利用路由實現(xiàn)登錄界面的跳轉(zhuǎn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04在react項目中使用antd的form組件,動態(tài)設(shè)置input框的值
這篇文章主要介紹了在react項目中使用antd的form組件,動態(tài)設(shè)置input框的值,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10