最終更新:2024-06-06 (木) 14:01:45 (12d)  

React Fiber
Top / React Fiber

React 16の新しい差分検出処理エンジン (リコンサイラ)

https://github.com/acdlite/react-fiber-architecture

https://reactjs.org/docs/codebase-overview.html#fiber-reconciler

主な目的は以下の通りです:

  • 中断可能な作業を小分けに分割する機能
  • 進行中の作業に優先順位を付けたり、再配置や再利用をする機能
  • React でレイアウトをサポートするための親子間を行き来しながらレンダーする機能
  • render() から複数の要素を返す機能
  • error boundary のサポートの向上

Fiber

  • ファイバーは作業の単位を表します。
  • React コンポーネントに特化したスタックの再実装
  • 単一の Fiber を仮想スタック フレームと考えることができます。

メモ

  • React のコア アルゴリズムを全面的に見直してスケジューリングを活用することが、Fiber の原動力
  • React は一方で、コンポーネントツリーに関する追加情報を保持するため “ファイバー (fiber)” と呼ばれる内部オブジェクトも使用します
  • https://ja.legacy.reactjs.org/docs/faq-internals.html

関連