react中の非同期レンダリング

3761 ワード
javascript
React Fiber
  • Diffアルゴリズム
    • reactをよく知っている友達はみんな知っています.reactにはコアアルゴリズムがあります.diffアルゴリズムといいます.webインターフェースはdomツリーで構成されており、異なるdomツリーは異なるインターフェースを描画します.reactはvirtual domを使ってdomツリーを表しますが、diffアルゴリズムはvirtual domツリーの違いを比較して、インタフェースの更新が必要な部分です.diffアルゴリズムとvirtual domの完璧な結合の過程はreconcilerと呼ばれています.これはreact攻城拔寨の絶対利器です.reconcilerがあれば、開発者は本物のdomツリーを身を離れて操作できます.画面の状態をreactに説明するだけで、reactは本物のdom操作を効率的に行うのに役立ちます.
    react 16の前のreconcilerはstack reconciler、fiberはreactの新しいreconcilerで、今回の更新はfiberアーキテクチャに一回のヘビー級のコアアーキテクチャの交替で、reactは今回の代替を完成するために二、三年の時間を準備しました.
    では、fiberには何かいいものがありますか?
    ファイバーはなぜ現れますか
    皆さんはこのような状況に遭遇したことがありますか?ページのボタンをクリックした時、ページには何の反応もないと感じました.パソコンがフリーズしているのではないかと疑っています.そして、ブラウザを素早く切って、パソコンがフリーズしていないことを発見しました.なぜこのような状況が発生しましたか?多くの場合、ブラウザが関連するjsコードを実行するのに忙しいため、ブラウザのメインスレッドがユーザの操作に即時に応答していない、またはインターフェースを更新していない.以下の図はこのような現象を表しています.あなたの会社にはプログラマが一人しかいません.このプログラマーがあなたの任務を実行している時、夢中になってプログラムしている状態で、外部の他の事件に応答できません.これはブラウザがjsコードを実行しているときのように、ページ更新などの操作をしません.
    お客様は神様という原則に基づいて、優れた開発者として、どうやって利用者の体験を下げることができますか?従って、reactチームは非同期レンダリングという概念を導入し、fiberアーキテクチャを採用することで、この非同期レンダリングの方式を実現することができる.
    元のstack reconcilerは再帰的に実行される関数のように、親コンポーネントからサブアセンブリを呼び出すreconcilerプロセスが再帰的に実行されるプロセスであり、これもなぜstack reconcilerと呼ばれるのか.私たちがset Stateを呼び出すと、reactはルートノードから遍歴して、すべての違いを探し出します.特に巨大なdomツリーにとって、この再帰遍歴のプロセスは特に長い時間をかかります.この期間には、任意のインタラクションとレンダリングがブロックされ、ユーザーに「フリーズ」という感覚を与えます.
    fiberの出現はこの問題を解決しました.これはreconcilerの過程を一つの小さなタスクに分割して、小さなタスクを完成した後、jsコードの実行を一時停止しました.その後、更新すべき内容とレスポンスが必要なイベントがあるかどうかを確認して、相応の処理をしてからjsコードを実行し続けます.このように、ユーザーには常に実行しているという感覚を与え、ユーザーの体験を向上させました.
    ファイバーはどうやって非同期レンダリングを行いますか?
    表示の仕事をしていると、60フレームという目標がよく聞こえます.これは画面の更新頻度、つまり画面が一秒に60回更新されます.これは60フレームの更新周波数で、ページが人の目の中でなめらかに見えるためです.一秒に60回更新するということは、16 msごとにページを更新する必要があります.もしページを更新する時間が16 msに満たないなら、次の更新のタイミングが来る前に、残りの時間が残ります.16 msの間隔でインターフェースを更新すると、ページの流暢さに全く影響しません.fiberのコアは60フレームの原則を利用して、優先度とrequest IdleCallbackに基づく巡回タスクスケジューリングアルゴリズムを実現している.
    requestIdleCallbackはブラウザから提供されたapiであり、ブラウザが暇な時にフィードバックを実行することができます.コールパラメータでは現在のフレームの残りの時間を取得できます.fiberはこのパラメータを利用して、現在の残りの時間は十分にタスクを実行し続けるかどうかを判断します.また、request IdleCallbackを呼び出して、ブラウザが暇な時に現在のタスクを継続して実行するように通知します.
    function fiber(    ) {
 if (     >       ) {
    ;
 } else {
 requestIdleCallback(fiber);
 }
}
    fiberはまた、異なるジョブの優先度を設定します.優先度の高いタスクは、すぐにページに表示される必要があります.たとえば、入力ボックスに文字を入力している場合、あなたの指がキーボードで各ボタンを押すと、入力ボックスがすぐにフィードバックされます.これで、入力が正しいかどうかが分かります.低優先度のジョブはサーバーからデータが送られてきました.この場合はページを更新します.例えば、この記事の好きな人の数＋1またはコメント＋1は、それほど緊急な更新ではありません.fiberはタスク優先度に応じてタスクスケジュールを動的に調整し、優先的に高い優先度のタスクを完了します.
    { 
 Synchronous: 1, //     ，     
 Task: 2, //           
 Animation 3, //   
 High: 4, //     
 Low: 5, //     
 Offscreen: 6, //         ，     
}
    fiberアーキテクチャには、データ構造があります.その名前はfiberといいます.これはなぜ新しいreconcilerをfiberと呼ぶのですか?fiberはjsオブジェクトです.このオブジェクトの属性の中で重要なのはstateNode、Return、child、sibling、alternateです.
    Fiber = {
 tag //        
 return //    
 child //    
 sibling //     
 alternate //     
 .....
};
    fiberはチェーン構造に基づいて、それぞれのポインタを持って、その親節のアイデアノードと兄弟ノードを指しています.diffの過程で、ノード接続の関係に従ってエルゴードしていることが分かります.
    fiberに存在する可能性のある問題はfiberにおいて、更新は段階的で、具体的には二つの段階に分けられています.まず、reconciliationの段階です.この段階は前後のdomツリーの違いを計算し、次にcomitの段階で更新をページに描画します.第一段階は中断可能です.この段階は時間がかかりますので、他の優先度の高いタスクを一時停止して実行する必要があります.第二段階は中断されず、一気にページにアップデートします.
    reconciliationの段階が中断されるため、comitの前にこれらのライフサイクル関数が何度も実行される可能性があります.react公式は現在、componentWillMount、componentWillreceive PropsとcomponetWillUpdateをunsafeと表記し、新しいライフサイクル関数get DerivedStation Froom Propsとget Snaphot BeforUpdateを使って交替しています.
    もう一つの問題は、飢餓の問題です.優先度が高いジョブがずっと挿入されていると、優先度が低いジョブが実行されなくなるという意味です.これは飢餓問題と呼ばれています.この問題に対して公式に提案された解決策は、完成した操作をできるだけ多重化して緩和することである.政府もこの問題を解決するためにより良い方法を提案していると思います.
    原文のリンク:https://knownsec-fed.com/2018...
    javascriptの行列は重いです.