跳至主要內容

執行緒模型

注意

本文檔指的是正在積極推廣的全新架構。

React Native 渲染器將渲染管線的工作分配到多個執行緒。​

在此，我們定義執行緒模型，並提供一些範例來說明渲染管線的執行緒使用方式。

React Native 渲染器的設計是執行緒安全的。在高階層次上，執行緒安全是透過在框架內部使用不可變資料結構（由 C++ 的「const 正確性」功能強制執行）來保證的。這表示 React 中的每次更新都會在渲染器中建立或複製新物件，而不是更新資料結構。這讓框架能夠向 React 公開執行緒安全且同步的 API。

渲染器使用兩個不同的執行緒

  • 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