【React Native】文件翻譯閱讀紀錄 - 指南 - 計時器
 |
| Facebook Open Source React Native |
計時器
計時器是應用程序的重要組成部分，React Native 實現了瀏覽器計時器。
Timers
- setTimeout, clearTimeout
- setInterval, clearInterval
- setImmediate, clearImmediate
- requestAnimationFrame, cancelAnimationFrame
requestAnimationFrame(fn) 與 setTimeout(fn,0) 不同 - 前者將在所有幀刷新後觸發，而後者將盡快觸發（在iPhone 5S上每秒超過1000x）。
setImmediate 在當前JavaScript執行塊的末尾執行，就在將批量響應發送回本機之前。請注意，如果您在 setImmediate 回調中調用 setImmediate，它將立即執行，它不會在兩者之間返回原生。
Promise 實現使用 setImmediate 作為其異步原語。
setImmediate 在當前JavaScript執行塊的末尾執行，就在將批量響應發送回本機之前。請注意，如果您在 setImmediate 回調中調用 setImmediate，它將立即執行，它不會在兩者之間返回原生。
Promise 實現使用 setImmediate 作為其異步原語。
InteractionManager
精心構建的本機應用程序感覺如此順暢的一個原因是在交互和動畫期間避免昂貴的操作。在React Native中，我們目前有一個限制，即只有一個JS執行線程，但您可以使用InteractionManager確保在任何交互/動畫完成後安排長時間運行的工作。
應用程序可以安排在與以下內容交互後運行的任務：
應用程序可以安排在與以下內容交互後運行的任務：
InteractionManager.runAfterInteractions(() => {
// ...long-running synchronous task...
});
將此與其他調度方案進行比較：
- requestAnimationFrame(): 用於隨時間推移動畫視圖的代碼。
- setImmediate/setTimeout/setInterval():稍後運行代碼，注意這可能會延遲動畫。
- runAfterInteractions(): 稍後運行代碼，不延遲活動動畫。
觸摸處理系統將一個或多個活動觸摸視為“交互”，並將延遲 runAfterInteractions() 回調，直到所有觸摸結束或被取消。
InteractionManager 還允許應用程序通過在動畫啟動時創建交互“句柄”並在完成時清除動畫來註冊動畫：
InteractionManager 還允許應用程序通過在動畫啟動時創建交互“句柄”並在完成時清除動畫來註冊動畫：
var handle = InteractionManager.createInteractionHandle();
// run animation... (`runAfterInteractions` tasks are queued)
// later, on animation completion:
InteractionManager.clearInteractionHandle(handle);
// queued tasks run if all handles were cleared
TimerMixin
我們發現使用React Native創建的應用程序中導致致命的主要原因是由於計時器在卸載組件後觸發。為了解決這個反復出現的問題，我們引入了 TimerMixin。如果你包含 TimerMixin，那麼你可以用 this.setTimeout(fn,500)替換你對 setTimeout(fn,500)的調用（只是前面這個。），當組件卸載時，一切都將被正確清理。
這個庫不附帶 React Native - 為了在你的項目中使用它，你需要在你的項目目錄中使用 npm i react-timer-mixin --save 來安裝它。
這個庫不附帶 React Native - 為了在你的項目中使用它，你需要在你的項目目錄中使用 npm i react-timer-mixin --save 來安裝它。
import TimerMixin from 'react-timer-mixin';
var Component = createReactClass({
mixins: [TimerMixin],
componentDidMount: function() {
this.setTimeout(() => {
console.log('I do not leak!');
}, 500);
},
});
這將消除許多追踪錯誤的艱苦工作，例如卸載組件後因超時觸發而導致的崩潰。
請記住，如果您為React組件使用ES6類，則沒有內置的mixin API。要將TimerMixin與ES6類一起使用，我們建議使用react-mixin。
請記住，如果您為React組件使用ES6類，則沒有內置的mixin API。要將TimerMixin與ES6類一起使用，我們建議使用react-mixin。
0 意見