本文へスキップ

スレッドモデル

注意

このドキュメントは、現在展開中の新しいアーキテクチャを参照しています。

React Nativeレンダラーは、レンダリングパイプラインの作業を複数のスレッドに分散します。​

ここでは、スレッドモデルを定義し、レンダリングパイプラインのスレッド使用例を示します。

React Nativeレンダラーは、スレッドセーフになるように設計されています。高いレベルでは、フレームワークの内部で不変のデータ構造を使用することでスレッドセーフが保証されます（C++の「const correctness」機能によって強制されます）。つまり、Reactでのすべての更新は、データ構造を更新する代わりに、レンダラーで新しいオブジェクトを作成またはクローンします。これにより、フレームワークはReactにスレッドセーフで同期的なAPIを提供できます。

レンダラーは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++状態の更新​

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

Threading model use case six