ホームページ > 記事 > ウェブフロントエンド > React-Nativeタイマーの実装方法

React-Nativeタイマーの実装方法

小云云オリジナル: 2018-01-27 16:54:192773ブラウズ

Web 開発では、通常、setTimeout 関数と setInterval 関数を使用してタイマー関数を使用する必要があります。この記事ではReact-NativeにおけるタイマーTimerの実装コードを中心に紹介しますが、編集者が非常に良いと思ったので参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ReactNativeにはタイマー機能も提供されているのでしょうか？答えは「はい」です。

まずは公式サイトの内容を見てみましょう。

タイマーはアプリケーションの非常に重要な部分です。 React Native は、ブラウザーと一貫したタイマーを実装します。

提供されるメソッドは次のとおりです:

setTimeout、clearTimeout
setInterval、clearInterval
setImmediate、clearImmediate
requestAnimationFrame、cancelAnimationFrame

setTimeout (fn, 1000) および setInterval (fn ,1000)

はWebと同じ意味で、前者は1000ミリ秒遅れてfnメソッドを実行する、後者は1000ミリ秒ごとにfnメソッドを実行するという意味です。

requestAnimationFrame(fn) と setTimeout(fn, 0) は異なります。前者は各フレームの更新後に 1 回実行されますが、後者は可能な限り高速に実行されます (iPhone5S ではおそらく 1 秒あたり 1000 回以上)。

setImmediate は、現在の JavaScript 実行ブロックの最後、バッチ応答データをネイティブに送信する直前に実行されます。なお、setImmediateのコールバック関数内でsetImmediateを実行すると、呼び出し前のネイティブコードを待たずにすぐに実行されます。

Promise の実装では、setImmediate を使用して非同期呼び出しを実行します。

InteractionManager (インタラクションマネージャー)

ネイティブアプリケーションが非常にスムーズに感じられる重要な理由は、インタラクションやアニメーション中の重い操作を避けるためです。 React Native では、JavaScript 実行のスレッドが 1 つしかないため、現時点では制限があります。ただし、InteractionManager を使用すると、面倒な作業を行う前に、すべてのインタラクションとアニメーションが処理されていることを確認できます。

アプリケーションは、次のコードを使用して、インタラクション終了後に実行されるタスクをスケジュールできます:

InteractionManager.runAfterInteractions(() => { 
  // ...需要长时间同步执行的任务... 
});

以前のいくつかのタスクスケジュールメソッドと比較してみましょう:

requestAnimationFrame() : コードの実行に使用されます。一定期間にわたるビューアニメーションを制御します

setImmediate/setTimeout/setInterval(): コードを後で実行します。これにより、現在進行中のアニメーションが遅れる可能性があることに注意してください。

runAfterInteractions(): 現在進行中のアニメーションを遅らせることなく、後でコードを実行します。
タッチ処理システムは、1 つ以上の進行中のタッチ操作を「インタラクション」として識別し、すべてのタッチ操作が終了するかキャンセルされるまで、runAfterInteractions() のコールバック関数の実行を遅らせます。

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

var handle = InteractionManager.createInteractionHandle(); 
// 执行动画... (`runAfterInteractions`中的任务现在开始排队等候) 
// 在动画完成之后 
InteractionManager.clearInteractionHandle(handle); 
// 在所有句柄都清除之后，现在开始依序执行队列中的任务

TimerMixin

React Native アプリケーションの多くの致命的なエラー (クラッシュ) がタイマーに関連していることがわかりました。具体的には、コンポーネントがアンマウントされた後も、タイマーはアクティブ化されたままになります。この問題を解決するために、TimerMixin を導入しました。 TimerMixin をコンポーネントに導入すると、元の setTimeout(fn, 500) を this.setTimeout(fn, 500) に変更できます (先頭に this. を追加するだけです)。コンポーネントがアンロードされると、タイマーイベントはすべても正しくクリアされます。

このライブラリは React Native ではリリースされていません。個別にインストールするには、プロジェクトフォルダーに「npm iact-timer-mixin --save」と入力する必要があります。

var TimerMixin = require(&#39;react-timer-mixin&#39;); 
 
var Component = React.createClass({ 
 mixins: [TimerMixin], 
 componentDidMount: function() { 
  this.setTimeout( 
   () => { console.log(&#39;这样我就不会导致内存泄露!&#39;); }, 
   500 
  ); 
 } 
});

setTimeout(...) の代わりに、react-timer-mixin によって提供される this.setTimeout(...) を使用することを強くお勧めします。これにより、デバッグが難しい多くのバグを回避できます。

翻訳注: Mixin は ES5 構文に属しており、ES6 コードの場合、Mixin を直接使用することはできません。

プロジェクトが ES6 コードで書かれており、タイマーを使用している場合は、コンポーネントをアンマウントするときに、使用されているすべてのタイマーを忘れずにクリア (clearTimeout/clearInterval) するだけで済みます。

それでは、TimerMixinと同じ効果を実現することもできます。例:

import React,{ 
 Component 
} from &#39;react-native&#39;; 
 
 
export default class Hello extends Component { 
 componentDidMount() { 
  this.timer = setTimeout( 
   () => { console.log(&#39;把一个定时器的引用挂在this上&#39;); }, 
   500 
  ); 
 } 
 componentWillUnmount() { 
  // 如果存在this.timer，则使用clearTimeout清空。 
  // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear 
  this.timer && clearTimeout(this.timer); 
 } 
};

注:

1. タイマー関数は比較的単純です。es6 で使用する場合は、コンポーネントをアンマウントするときに、使用されているすべてのタイマーを忘れずにクリアする必要があります。
2. タイマーを使用して、テキストメッセージのカウントダウンなどのいくつかの一般的な機能を実装できます。
3. 遅延実行を必要とするいくつかの特殊なシナリオにもタイマーを使用できます。たとえば、現在 RN によって提供されているフェッチは提供されていません。タイムアウト設定。クライアントがバックエンドでインターフェイスを要求したときにインターフェイスがタイムアウトした場合 (バックエンドサービスによって設定されたタイムアウトは 10 秒)、RN インターフェイスは読み込みを続け、中止できません。この時点でタイマーをうまく使用すると、クライアントから送信されたリクエストの時間が特定の値 (5 秒) を超えた場合、リクエストは失敗したと見なされます。
4. 今日、リストページが次のページをロードするときに、インターフェイスがすぐに応答すると、ロード効果が表示されないというシナリオも見つけました。 500 ミリ秒の遅延です。ははは...

React-Nativeタイマーの実装方法

関連記事