資訊專欄INFORMATION COLUMN
摘要：最近功能需求，在用戶輸入的一個(gè)輸入框后，毫秒觸發(fā)事件，解決方案很簡單，嘛代碼如下看似合情合理，但是呢，完全不好用，不是別的不好用，而且完全不會(huì)，而且每個(gè)都執(zhí)行了，這是啥原因呢想了一想，于是又改了一個(gè)寫法好用了，也是同樣的道理，別忘記就好。
最近功能需求，在用戶輸入的一個(gè)輸入框后，500毫秒觸發(fā)事件，解決方案很簡單，setTimeout嘛......
代碼如下：
class A extends React.Component{
handleChange(target){
var that = this;
if(this.timer){
clearTimeout(this.timer);
}
this.timer = setTimeout(setTimeoutFun(that,target),500);
}
setTimeoutFun(_self,_target){
_self.setState({
xxx:_target.value
});
_self.timer = null;
}
render(){
return(
)
}
}
看似合情合理，但是呢，完全不好用，不是別的不好用，而且完全不會(huì)clear，而且每個(gè)setTimeout都執(zhí)行了，這是啥原因呢？想了一想，于是又改了一個(gè)寫法：
class A extends React.Component{
handleChange(target){
var that = this;
if(this.timer){
clearTimeout(this.timer);
}
this.timer = setTimeout(()=>{
that.setState({
xxx:target.value
});
},500);
}
render(){
return(
)
}
}
Bingo!!好用了，setInterval也是同樣的道理，別忘記clear就好。
解決方法就是不要調(diào)用再模塊中定義的方法，用匿名函數(shù)?。?/strong>但是為什么匿名函數(shù)就可以，但是在創(chuàng)建的模塊中定義的方法就不好用呢？這個(gè)原因還在研究，等研究明白了再更新，希望能對(duì)大家有幫助??！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83314.html
摘要：比如就是一種，它可以用來管理狀態(tài)返回的結(jié)果是數(shù)組，數(shù)組的第一項(xiàng)是值，第二項(xiàng)是賦值函數(shù)，函數(shù)的第一個(gè)參數(shù)就是默認(rèn)值，也支持回調(diào)函數(shù)。而之所以輸出還是正確的，原因是的回調(diào)函數(shù)中，值永遠(yuǎn)指向最新的值，因此沒有邏輯漏洞。 1. 引言 如果你在使用 React 16，可以嘗試 Function Component 風(fēng)格，享受更大的靈活性。但在嘗試之前，最好先閱讀本文，對(duì) Function Com...
摘要：接下來看下偽代碼調(diào)度算法偽代碼原來這段寫的匆忙且不好，重新更新了一篇講調(diào)度算法的大概實(shí)現(xiàn)性能改善的原理二。 問題背景 React16 更新了底層架構(gòu)，新架構(gòu)主要解決更新節(jié)點(diǎn)過多時(shí)，頁碼卡頓的問題。譬如如下代碼，根據(jù)用戶輸入的文字生成10000行數(shù)據(jù)，用戶輸入框會(huì)出現(xiàn)卡頓現(xiàn)象。 class App extends React.Component { constructor( prop...
摘要：插件性能優(yōu)化及個(gè)人常用優(yōu)化方法經(jīng)常會(huì)觸發(fā)視覺變化。作用域鏈指的是當(dāng)前作用于下可用變量的集合，它在各種主流瀏覽器中至少包含兩個(gè)部分局部變量的集合和全局變量的集合。在考慮優(yōu)化時(shí)，數(shù)值和變量的性能差不多，并且速度顯著優(yōu)于對(duì)象屬性和數(shù)組元素。 JavaScript 插件性能優(yōu)化及個(gè)人react常用優(yōu)化方法 JavaScript 經(jīng)常會(huì)觸發(fā)視覺變化。有時(shí)是直接通過樣式操作，有時(shí)是會(huì)產(chǎn)生視覺變化...
摘要：在讀了一些文章后，大致是找到自己總是掉坑的原因了沒理解中的特性。通過這個(gè)示例，相信會(huì)比較容易地理解特性，并如何使用來暫時(shí)繞過它。在知道并理解這個(gè)特性后，有助于進(jìn)一步熟悉了的運(yùn)行機(jī)制，減少掉坑的次數(shù)。 由于剛使用 React hooks 不久，對(duì)它的脾氣還拿捏不準(zhǔn)，掉了很多次坑；這里的 坑 的意思并不是說 React hooks 的設(shè)計(jì)有問題，而是我在使用的時(shí)候，因?yàn)檫€沒有跟上它的理念導(dǎo)...
摘要：前言如今可謂是一匹黑馬數(shù)已居第一位前端開發(fā)對(duì)于的使用已經(jīng)越來越多，它的優(yōu)點(diǎn)就不做介紹了本篇是我對(duì)使用過程中以及對(duì)一些社區(qū)朋友提問我的問題中做的一些總結(jié)幫助大家踩坑。隨后的重新渲染，元素組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過。 前言 vue如今可謂是一匹黑馬,github star數(shù)已居第一位！前端開發(fā)對(duì)于vue的使用已經(jīng)越來越多，它的優(yōu)點(diǎn)就不做介紹了,本篇是我對(duì)vue使用過程中以及...
閱讀 3275·2023-04-25 22:47
閱讀 3790·2021-10-11 10:59
閱讀 2317·2021-09-07 10:12
閱讀 4274·2021-08-11 11:15
閱讀 3442·2019-08-30 13:15
閱讀 1760·2019-08-30 13:00
閱讀 979·2019-08-29 14:02
閱讀 1698·2019-08-26 13:57
