React Fiber: Reactの新エンジンを詳査する

Facebookは現在、人気のJavaScriptフレームワークであるReactを支援する、まったく新しいアーキテクチャに取り組んでいる。React Fiberと呼ばれるこの新デザインでは、ブラウザや他のレンダリングターゲットによる認識の応答性を改善するために、変更を検出するタイミングと方法が改められる。

この新たなアーキテクチャは、2016年7月に公開されて以来、Facebook内で数年にわたって検討が続けられてきたもので、下位互換性を維持しながらの、Reactのリコンシリエーション(reconciliation)アルゴリズムの根本的な書き換えを目指している。このプロセスは、変更がいつ発生したかを判断し、それをレンダラに渡す役割を担うものだ。

実際にチームが開発しているのは、シングルスレッドのJavaScriptエンジン上で動作する、協調的で優先順位の高いタスクスケジューラである。オリジナルのリコンシリエーションアルゴリズム(現在はStack Reconcilerと呼ばれている)では、Virtual DOM diffがコンポーネントツリー全体の走査を行なっていた。

重要なのは、スタックリコンシリエーションプログラムが、コンポーネントツリーを常に１回のパスで同期的に処理する、という点を理解することです。Stack Reconcilerは一時停止できないため、更新が深く、使用可能なCPU時間に制限のある環境には最適ではないのです。

これに比較して、Fiber Reconcilerには次のような異なる目標がある。

• 割り込み可能な作業をチャンクに分割可能であること。
• 進行中の作業の優先順位付け、再分類、再利用が可能であること。
• Reactのレイアウトをサポートするために、親と子の間を行き来することが可能なこと。
• render()から複数のエレメントを返すことが可能なこと。
• エラーバウンダリのサポートを改善すること。

要するにReact Fiberでは、コンポーネントツリー全体に変更が反映されるのを待つのではなく、必要に応じて処理を中断し、より重要な更新を確認することが可能なのだ。このスケジューリング機能の多くの部分は、W3Cの勧告候補であるrequestIdleCallbackによって実現されている。

React Conf 2017でLin Clark氏が行なったプレゼンテーションでは、React Fiberの概要の紹介と合わせて、新しいReconcilerがこれまでとはどう違うのか、開発者に対するステップバイステップかつ視覚的な説明が行なわれた。

開発者が自身のコードについて心配する必要はほとんどないが、特定のライフフックサイクルの発生順序を前提として、それに依存しているアプリについては、発生順序が保証されなくなるために問題が発生する可能性がある。

“こういった問題でアプリの動作が損なわれないように”、とClark氏は言う。“Fiberチームは、安全な(graceful)アップデートパスに取り組んでいます。”

バージョン16へのアップデートが多くのReactアプリに問題を起こすとは考えていない、とDan Abramov氏は記している。

React 16(開発中)はリライトですが、Fecebookにある30,000以上(!)の公開APIは同じです。変更が必要なものは10程度ありますが、これらはサポート外ないし文書化されていない動作に依存していたコンポーネントです。文字通り99,9％の互換性です。このことから、あなたのコードがReact 16で動作する可能性は高い、と確信できます。

Fiberが公開される予定のReactバージョン16では、リコンシリエーションエンジンに加えて、新しいレンダラー(ReactDOM、React Nativeなど)も提供される予定だ。それまでの間は、isfiberreadyyet.comでテストスイートの最新結果を確認することができる。本記事の時点では、テストの92.2%がパスしている。