メインコンテンツへスキップ

タイマー

タイマーはアプリケーションの重要な部分であり、React Nativeはブラウザのタイマーを実装しています。

タイマー

  • setTimeout, clearTimeout
  • setInterval, clearInterval
  • setImmediate, clearImmediate
  • requestAnimationFrame, cancelAnimationFrame

requestAnimationFrame(fn)setTimeout(fn, 0)と同じではありません。前者はすべてのフレームがフラッシュされた後に発火しますが、後者はできるだけ早く(iPhone 5Sでは1秒間に1000回以上)発火します。

setImmediateは、現在のJavaScript実行ブロックの最後に、バッチ化されたレスポンスをネイティブに送り返す直前に実行されます。setImmediateコールバック内でsetImmediateを呼び出した場合、それはすぐに実行され、その間にネイティブに処理を戻すことはないことに注意してください。

Promiseの実装は、非同期実装としてsetImmediateを使用しています。

注記

Androidでデバッグする際、デバッガーとデバイスの時刻がずれていると、アニメーションやイベントの動作などが正常に機能しなかったり、結果が正確でなかったりする場合があります。これを修正するには、デバッガーマシンで`adb shell "date `date +%m%d%H%M%Y.%S%3N`"`を実行してください。実機で使用するにはroot権限が必要です。

InteractionManager

よくできたネイティブアプリが非常にスムーズに感じる理由の1つは、インタラクションやアニメーション中に負荷の高い操作を避けていることです。React Nativeには現在、JSの実行スレッドが1つしかないという制約がありますが、InteractionManagerを使用することで、時間のかかる処理がインタラクションやアニメーションが完了した後に開始されるようにスケジュールできます。

アプリケーションは、以下のようにしてインタラクション後にタスクを実行するようにスケジュールできます。

tsx
InteractionManager.runAfterInteractions(() => {
// ...long-running synchronous task...
});

これを他のスケジューリング方法と比較してみましょう。

  • requestAnimationFrame(): 時間をかけてビューをアニメーションさせるコード用です。
  • setImmediate/setTimeout/setInterval(): 後でコードを実行します。これによりアニメーションが遅延する可能性があることに注意してください。
  • runAfterInteractions(): 実行中のアニメーションを遅延させることなく、後でコードを実行します。

タッチ処理システムは、1つ以上のアクティブなタッチを「インタラクション」とみなし、すべてのタッチが終了またはキャンセルされるまでrunAfterInteractions()コールバックを遅延させます。

InteractionManagerでは、アプリケーションがアニメーションを登録することもできます。アニメーション開始時にインタラクション「ハンドル」を作成し、完了時にそれをクリアします。

tsx
const handle = InteractionManager.createInteractionHandle();
// run animation... (`runAfterInteractions` tasks are queued)
// later, on animation completion:
InteractionManager.clearInteractionHandle(handle);
// queued tasks run if all handles were cleared