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

スレッディングモデル

注意

このドキュメントは、現在展開中の新しいアーキテクチャに関するものです。

React Nativeレンダラーは、レンダーパイプラインの処理を複数のスレッドに分散させます。​

ここでは、スレッドモデルを定義し、レンダーパイプラインのスレッド使用状況を説明するためのいくつかの例を提供します。

React Nativeレンダラーはスレッドセーフになるように設計されています。高いレベルでは、フレームワークの内部で不変 (immutable) なデータ構造を使用することによって、スレッドセーフティが保証されています (これはC++の「const正当性」機能によって強制されます)。これは、Reactでのすべての更新が、既存のデータ構造を更新するのではなく、レンダラー内で新しいオブジェクトを作成またはクローンすることを意味します。これにより、フレームワークはスレッドセーフで同期的なAPIをReactに公開できます。

レンダラーは2つの異なるスレッドを使用します

  • UIスレッド（しばしばメインスレッドと呼ばれる）：ホストビューを操作できる唯一のスレッドです。
  • JavaScriptスレッド：Reactのレンダーフェーズとレイアウトが実行される場所です。

各フェーズでサポートされている実行シナリオを見ていきましょう

Threading model symbols

レンダーシナリオ​

JSスレッドでのレンダー​

これは最も一般的なシナリオで、レンダーパイプラインのほとんどがJavaScriptスレッドで発生します。

Threading model use case one

UIスレッドでのレンダー​

UIスレッドで優先度の高いイベントが発生した場合、レンダラーはすべてのレンダーパイプラインをUIスレッドで同期的に実行できます。

Threading model use case two

デフォルトまたは連続的なイベントによる中断​

このシナリオは、UIスレッドでの優先度の低いイベントによるレンダーフェーズの中断を示しています。ReactとReact Nativeレンダラーは、レンダーフェーズを中断し、その状態をUIスレッドで実行される優先度の低いイベントとマージすることができます。この場合、レンダープロセスはJSスレッドで実行を続けます。

Threading model use case three

ディスクリートイベントによる中断​

レンダーフェーズは中断可能です。このシナリオは、UIスレッドでの優先度の高いイベントによるレンダーフェーズの中断を示しています。Reactとレンダラーは、レンダーフェーズを中断し、その状態をUIスレッドで実行された優先度の高いイベントとマージすることができます。レンダーフェーズはUIスレッドで同期的に実行されます。

Threading model use case four

C++ Stateの更新​

UIスレッドで発生し、レンダリングフェーズをスキップする更新です。詳細については、React Nativeレンダラーの状態更新を参照してください。

Threading model use case six