React Fiberアーキテクチャの概要

こんにちは、Habr！ Andrew Clarkの記事「React Fiber Architecture」の翻訳に注目してください。

エントリー

React Fiberは、主要なReactアルゴリズムの進歩的な実装です。 これは、React開発チームによる2年間の研究の集大成です。

Fiberの目標は、アニメーション、ページ上の要素の整理、要素の移動などのタスクを開発する際の生産性を高めることです。 その主な機能はインクリメンタルレンダリングです。レンダーの作業をユニットに分割し、複数のフレームに分散する機能です。

他の主要な機能には、DOMツリーの着信更新を一時停止、キャンセル、または再利用する機能、さまざまなタイプの更新に優先順位を付ける機能、およびプリミティブの調整が含まれます。

この記事を読む前に、Reactの基本原則を理解することをお勧めします。

• Reactコンポーネント、要素、およびインスタンス
• 和解
• React-基本的な理論的概念
• 設計原則

復習

和解とは何ですか？

調整は、1つの要素ツリーを別の要素ツリーと区別して、交換が必要な部分を決定するために使用されるReactアルゴリズムです。

更新は、Reactアプリケーションのレンダリングに使用されるデータの変更です。 これは通常、setStateメソッドを呼び出した結果です。 コンポーネントのレンダリングの最終結果。

React APIの重要な考え方は、更新をアプリケーションの完全なレンダリングにつながるかのように考えることです。 これにより、開発者は宣言的に行動することができ、ある状態から別の状態へのアプリケーションの移行がどの程度合理的か（AからB、BからC、CからAなど）を心配する必要はありません。

一般に、変更ごとにアプリケーション全体をレンダリングすることは、ほとんどの従来のアプリケーションでのみ機能します。 現実の世界では、これはパフォーマンスに悪影響を及ぼします。 この行為には、パフォーマンスの大きな部分に影響を与えることなく完全なレンダリングビューを作成する最適化が含まれます。 これらの最適化のほとんどには、調整と呼ばれるプロセスが含まれます。

調整は、その背後にあるアルゴリズムであり、「仮想DOM」と呼ばれるものです。 定義は次のように聞こえます。Reactアプリケーションをレンダリングすると、アプリケーションを説明する要素ツリーが予約メモリに生成されます。 このツリーは、レンダリング環境に組み込まれます。ブラウザーアプリケーションの例を使用して、DOM操作のセットに変換されます。 アプリケーションの状態が更新されると（通常はsetStateを呼び出して）、新しいツリーが生成されます。 新しいツリーは前のツリーと比較され、更新されたアプリケーションの再描画に必要な操作を正確に計算して有効にします。

Fiberは調整機能の密接な実装であるという事実にもかかわらず、ほとんどの場合、Reactのドキュメントで説明されている高レベルのアルゴリズムは同じです。

主な概念：

• さまざまなタイプのコンポーネントは、実質的に異なるツリーの生成を示唆しています。 Reactはそれらを比較しようとはせず、単に古いツリーを完全に置き換えます。
• リストはキーを使用して区別されます。 キーは「永続的、予測可能、一意」でなければなりません。

調整とレンダリング

DOMツリーはReactが描画できる環境の1つであり、残りはReact Nativeを使用してネイティブiOSおよびAndroidビューに起因することができます（そのためVirtual Domは少し不適切な名前です）。

Reactが非常に多くの目標をサポートする理由は、Reactが調整とレンダリングが別々のフェーズになるように構築されているためです。 調整機能は、ツリーのどの部分が変更されたかを計算し、レンダラーは後でこの情報を使用して以前にレンダリングされたツリーを更新します。

この分離は、React DOMとReact Nativeが、React Coreにある同じキャッシュツールを使用するときに独自のレンダリングメカニズムを使用できることを意味します。

ファイバーは、調整アルゴリズムの再設計された実装です。 レンダリングと間接的な関係がありますが、新しいメカニズムのすべての利点をサポートするためにレンダリングメカニズム（レンダリング）を変更できます。

計画は、いつ作業を完了する必要があるかを決定するプロセスです。

作業 -実行する必要のある計算。 作業は通常、更新の結果です（たとえば、setStateの呼び出し）。

Reactアーキテクチャの原則は非常に優れているため、この引用でのみ説明できます。

現在のReact実装では、ツリーを再帰的に走査し、1ティック（16ミリ秒）の間に更新されたツリー全体でレンダリング関数を呼び出します。 ただし、将来的には、いくつかの更新をキャンセルしてフレームのジャンプを防ぐことができるようになります。

これは、React Designに関して頻繁に議論されるトピックです。 一般的なライブラリの中には、「プッシュ」アプローチを実装するものがあり、新しいデータが利用可能になると計算が実行されます。 ただし、Reactはプルアプローチを採用しており、必要に応じて計算をキャンセルできます。

Reactは、一般化されたデータを処理するためのライブラリではありません。 これは、ユーザーインターフェイスを構築するためのライブラリです。 どの計算が適切で、どの計算が現時点では適切でないかを判断するために、アプリケーション内で独自の位置を持つ必要があると考えています。

背後に何かがあれば、それに関連するすべてのロジックを元に戻すことができます。 データがフレームレンダリングレートよりも速く到着する場合、更新を組み合わせることができます。 フレームのダウンロードを防止するために、ユーザーの操作（ボタンがクリックされたときのアニメーションの外観など）の結果として生じる作業の優先度を、背景での重要度の低い作業（サーバーから読み込まれた新しいコンテンツのレンダリング）に対して高めることができます。

主な概念：

• ユーザーインターフェイスでは、各更新プログラムをすぐに適用することは重要ではありません。 実際、この動作は不要であり、フレームの低下とUXの低下の一因となります。
• 更新の種類によって優先順位が異なります。アニメーションの更新は、たとえばデータストレージの更新よりも早く終了するはずです。
• プッシュベースのアプローチでは、アプリケーション（開発者）が作業の計画方法を決定する必要があります。 プルベースのアプローチにより、フレームワークが決定を下すことができます。

現時点では、Reactにはプランニングの利点があまりありません。 サブツリー全体の更新結果がすぐに描画されます。 Reactカーネルアルゴリズムの要素を慎重に選択してスケジューリングを適用することが、Fiberの重要なアイデアです。

ファイバーとは？

React Fiberアーキテクチャーの中心について説明します。 ファイバーは、開発者が思考に慣れているよりも、アプリケーションに対する下位レベルの抽象化です。 あなたがそれを絶望的に理解しようとする試みを考えるなら、落胆することを感じないでください（あなたは一人ではありません）。 探し続けると、最終的に実を結びます。

それで！

Fiberアーキテクチャの主な目標であるReactが計画を活用できるようにしました。 具体的には、次のことができる必要があります。

• 仕事を止めて、後で戻ってください。
• さまざまなタイプの作業に優先順位を付けます。
• 以前に行った作業を再利用します。
• 不要になったら作業をキャンセルします。

これをすべて行うには、まず作業をユニットに分割する必要があります。 ある意味では、これは繊維です。 ファイバーは作業単位を表します。

さらに進むために、Reactの基本的な概念「関数データとしてのコンポーネント」に戻りましょう。

v = f(d)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これが意味することは、Reactアプリケーションのレンダリングは、本体に他の関数への呼び出しなどが含まれる関数を呼び出すようなものであることです。 この類似性は、繊維について考えるときに役立ちます。

コンピュータが基本的にプログラムの実行順序を確認する方法は、コールスタックと呼ばれます。 関数が完了すると、新しいスタックコンテナがスタックに追加されます。 このスタックコンテナは、関数によって実行される作業を表します。

ユーザーインターフェイスを使用する場合、すぐに多くの作業が行われますが、これは問題であり、アニメーションのジャンプにつながり、断続的に表示されます。 さらに、この作業の一部は、最新の更新プログラムに置き換えられる場合は必要ない場合があります。 この時点で、コンポーネントは一般的な機能よりも具体的な責任があるため、ユーザーインターフェイスと機能の比較は異なります。

最新のブラウザーとReact Nativeは、この問題の解決に役立つAPIを実装しています。

requestIdleCallbackはタスクを分配して、優先度の低い関数が単純な期間で呼び出されるようにし、requestAnimationFrameはタスクを分配して、優先度の高い関数が次のフレームで呼び出されるようにします。 問題は、これらのAPIを使用するには、レンダリング作業を増分単位に分割する必要があることです。 呼び出しスタックのみに依存している場合、スタックが空になるまで作業が続行されます。

ユーザーインターフェイスの一部の表示を最適化するために呼び出しスタックの動作をカスタマイズできたらいいと思いませんか？ コールスタックを解除してコンテナを手動で操作できたらいいと思いませんか？

これがReact Fiberの呼び出しです。 ファイバーは、Reactコンポーネントに合わせた新しいスタック実装です。 単一のファイバーを仮想スタックコンテナーと考え​​ることができます。

スタックのこの実装の利点は、コンテナのスタックをメモリに保存して、必要なときに（そしてどこでも）実行できることです。 これは、計画目標を達成するための重要な定義です。

計画に加えて、スタックでの手動アクションにより、並行性やエラー境界などの概念の可能性が明らかになります。

次のセクションでは、繊維の構造に注目します。

繊維構造

具体的には、「ファイバー」は、コンポーネント、その入力および出力に関する情報を含むJavaScriptオブジェクトです。

ファイバーはスタックコンテナと一致していますが、コンポーネントの本質とも一致しています。

「繊維」の重要な特性を次に示します（このリストは完全ではありません）。

タイプとキー

タイプとキーは、ファイバーとReactエレメントを提供します。 実際、ファイバーが作成されると、これらの2つのフィールドは直接ファイバーにコピーされます。

ファイバーのタイプは、ファイバーが対応するコンポーネントを表します。 コンポーネントの構成の場合、タイプはコンポーネントの関数またはクラスです。 サービスコンポーネント（div、span）の場合、タイプは文字列です。

概念的には、型は、スタックコンテナによって実行が追跡される関数です。

タイプと一緒に、ツリーを比較してファイバーを再利用できるかどうかを判断するときにキーが使用されます。

子供と兄弟



これらのフィールドは他の繊維を指し、繊維の再帰構造を表します。

ファイバーの子は、コンポーネントでrenderメソッドを呼び出した結果として返された値に対応します。 以下の例では：

 function Parent() { return <Child /> }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

親ファイバーの子は子に対応します。

renderが複数の子を返す場合（Fiberの新機能）、相対（または隣接）フィールドが使用されます。

 function Parent() { return [<Child1 />, <Child2 />] }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

子繊維は、先頭が最初の子である単一リンクリストです。 したがって、この例では、子の親はChild1であり、Child1の親はChild2です。

関数との類推に戻ると、子ファイバーは最後に呼び出される関数（テールと呼ばれる関数）と考えることができます。

ウィキペディアの例：

 function foo(data) { a(data); return b(data); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、テールと呼ばれる関数はbです。

戻り値（戻り）

戻りファイバーは、プログラムが現在のファイバーを処理した後に戻るべきファイバーです。 これは、スタックコンテナのアドレスを返すのと同じです。

また、親繊維と見なすこともできます。

ファイバーに複数の子ファイバーがある場合、各子ファイバーの戻り値は親ファイバーを返します。 上記の例では、Child1とChild2からの戻りファイバーは親です。

現在のプロパティとキャッシュされたプロパティ（pendingPropsおよびmemorizedProps）

概念的には、プロパティは関数の引数です。 現在のファイバープロパティは、実行開始時のこれらのプロパティのセットです。キャッシュされたプロパティは、実行終了時のセットです。

入力待機プロパティがキャッシュされると、これは、計算せずに以前のファイバー出力を再利用できることを意味します。

現在の作業の優先度（pendingWorkPriority）

優先度を決定する作業の量は、ファイバーによって表示されます。 React ReactPrioritylevelの優先度モジュールには、さまざまな優先度レベルとそれらが表すものが含まれています。

タイプNoWork（0）の例外から始めて、数字が大きいほど優先順位が最低になります。 たとえば、次の関数を使用して、ファイバーの優先度が指定されたレベルよりも大きいかどうかを確認できます。

 function matchesPriority(fiber, priority) { return fiber.pendingWorkPriority !== 0 && fiber.pendingWorkPriority <= priority }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この関数は、説明のみを目的としています。 React Fiberデータベースの一部ではありません。

スケジューラーは優先順位フィールドを使用して、実行可能な次の作業単位を見つけます。 このアルゴリズムについては、次のセクションで説明します。

代替（またはペア）

ファイバーの更新（フラッシュ）-これは、画面に出力を表示することを意味します。

開発中のファイバー（作業中）-まだ構築されていないファイバー。 つまり、まだ返されていないスタックコンテナです。

いつでも、コンポーネントの本質は、現在の状態の繊維、更新された繊維、または開発中の繊維に対応する繊維の状態を2つ以下しか持ちません。

現在のファイバーの後に開発中のファイバーが続き、次にファイバーが更新されます。

cloneFiber関数を使用して、次のファイバー状態が遅延作成されます。 ほとんどの場合、新しいオブジェクトを作成するとき、cloneFiberは、リソースのコストを最小限に抑えながら、代替ファイバー（存在する場合）の再利用を試みます。

スチームフィールド（または代替）は実装の詳細と考える必要がありますが、ドキュメンテーションでは頻繁に表示されるため、言及することはできません。

結論はサービス要素（またはサービス要素のセット）です。 リーフノードReactアプリケーション。 これらは各表示環境に固有です（たとえば、ブラウザでは「div」、「span」など）。 JSXでは、これらは小文字のタグ名と呼ばれます。

結論：新しいReact v16.0アーキテクチャの機能を試すことをお勧めします