在實際項目當中,一個函數可能會由于某種狀態的改變,被調用多次,然后后端的接口就會被反復的調用。這時候,我們需要做一個性能優化,增加函數防抖功能。
添加函數防抖插件:lodash/debounce
import debounce from 'lodash/debounce';//在constructor統一綁定事件. 和經常使用的bind(this)一樣
class Demo extends React.Component {constructor(props) {super(props);//這里設置的是 表示handleSearch 函數,在使用時沒500ms才被調用一次 this.handleSearch = debounce(this.handleSearch, 500);}handleSearch = (value) => {...}...
}
這樣你在輸入數據的500ms后才會觸發handleSearch函數,可以大幅度減少調取后臺接口的次數!
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态