在web開發中,我們通常需要使用定時器功能,使用setTimeout和setInterval函數。
那么在ReactNative中,是否也提供了定時器的功能呢? 答案是肯定的。
我們還是先看看官網怎么說的。
定時器是一個應用中非常重要的部分。React Native實現了和瀏覽器一致的定時器Timer。
提供的方法如下:
setTimeout, clearTimeout setInterval, clearInterval setImmediate, clearImmediate requestAnimationFrame, cancelAnimationFramesetTimeout (fn, 1000) 和 setInterval (fn,1000)
和web中的意思一樣,前者表示延遲1000毫秒后執行 fn 方法 ,后者表示每隔1000毫秒執行 fn 方法。
requestAnimationFrame(fn)和setTimeout(fn, 0)不同,前者會在每幀刷新之后執行一次,而后者則會盡可能快的執行(在iPhone5S上有可能每秒1000次以上)。
setImmediate則會在當前JavaScript執行塊結束的時候執行,就在將要發送批量響應數據到原生之前。注意如果你在setImmediate的回調函數中又執行了setImmediate,它會緊接著立刻執行,而不會在調用之前等待原生代碼。
Promise的實現就使用了setImmediate來執行異步調用。
InteractionManager(交互管理器)
原生應用感覺如此流暢的一個重要原因就是在互動和動畫的過程中避免繁重的操作。在React Native里,我們目前受到限制,因為我們只有一個JavaScript執行線程。不過你可以用InteractionManager來確保在執行繁重工作之前所有的交互和動畫都已經處理完畢。
應用可以通過以下代碼來安排一個任務,使其在交互結束之后執行:
InteractionManager.runAfterInteractions(() => { // ...需要長時間同步執行的任務... }); 我們來把它和之前的幾個任務安排方法對比一下:
requestAnimationFrame(): 用來執行在一段時間內控制視圖動畫的代碼
setImmediate/setTimeout/setInterval(): 在稍后執行代碼。注意這有可能會延遲當前正在進行的動畫。
runAfterInteractions(): 在稍后執行代碼,不會延遲當前進行的動畫。
觸摸處理系統會把一個或多個進行中的觸摸操作認定為'交互',并且會將runAfterInteractions()的回調函數延遲執行,直到所有的觸摸操作都結束或取消了。
InteractionManager還允許應用注冊動畫,在動畫開始時創建一個交互“句柄”,然后在結束的時候清除它。
var handle = InteractionManager.createInteractionHandle(); // 執行動畫... (`runAfterInteractions`中的任務現在開始排隊等候) // 在動畫完成之后 InteractionManager.clearInteractionHandle(handle); // 在所有句柄都清除之后,現在開始依序執行隊列中的任務
TimerMixin
我們發現很多React Native應用發生致命錯誤(閃退)是與計時器有關。具體來說,是在某個組件被卸載(unmount)之后,計時器卻仍然被激活。為了解決這個問題,我們引入了TimerMixin。如果你在組件中引入TimerMixin,就可以把你原本的setTimeout(fn, 500)改為this.setTimeout(fn, 500)(只需要在前面加上this.),然后當你的組件卸載時,所有的計時器事件也會被正確的清除。
新聞熱點
疑難解答
圖片精選