web-dev-qa-db-ja.com

React vs React Fiberの違いは何ですか?

反応繊維の準備ができたと聞いたばかりです。反応繊維と反応繊維の大きな違いは何ですか?その違いのまったく新しい概念を学ぶことは価値がありますか?

49
Hoang Trung

React Fiberは、Reactのコアアルゴリズムの継続的な再実装であり、単なるReactの完全な内部書き換えです。

React Fiberは、Reactコアの完全な下位互換性のある書き換えです。

React Fiberの目標は、アニメーション、レイアウト、ジェスチャーなどの領域への適合性を高めることです。その見出しの機能はインクリメンタルレンダリングです。レンダリング作業をチャンクに分割し、複数のフレームに広げることができます。

React Fiberは仮想スタックフレームであり、React FiberはReactコンポーネントに特化したスタックフレームの再実装です。各ファイバーは、フレームの情報がヒープ上のメモリに保存される仮想スタックフレームと考えることができます。情報はヒープに保存されるため、データ構造を制御および操作し、必要に応じて関連情報を処理できます。

このビデオ にLin Clarkの優れた説明があります。

詳細については、次のリンクを確認してください。

1 . React Fiberとは?

2 . React Fiber Architecture

3 . React 16とはどういう意味ですか?

これがあなたを助けることを願っています!!

61
Santosh Shinde

React Fiberは、Reactのコアアルゴリズムの継続的な再実装です。反応繊維と反応繊維の主な違いは、これらの新しい機能です:-

  1. インクリメンタルレンダリング:- React v16.0には、完全に書き直されたサーバーレンダラーが含まれています。本当に速いです。ストリーミングをサポートしているため、クライアントへのバイト送信をより速く開始できます

  2. レンダリングAPIでエラーを処理する:クラスコンポーネントをエラー境界にするために、componentDidCatch(error、info)という新しいライフサイクルメソッドを定義します。

  3. レンダリングから複数の要素を返す:React v16.0のこの新機能により、コンポーネントのレンダリングメソッドから要素の配列と文字列を返すことができるようになりました。

  4. Portals:ポータルは、親コンポーネントのDOM階層の外側に存在するDOMノードに子をレンダリングするためのファーストクラスの方法を提供します。

  5. フラグメント:Reactの共通パターンは、コンポーネントが複数の要素を返すためのものです。フラグメントを使用すると、DOMに余分なノードを追加することなく、子のリストをグループ化できます。

15
Mansi Teharia

React 16ベータ版は数時間前にリリースされました: https://github.com/facebook/react/issues/10294

書き換えられたReactコア(内部的に「ファイバー」と名付けられたもの)は、いくつかの重大な変更を除き、既存のアプリとの互換性を維持する必要があります(リリースノートを参照) Github)。ほとんどの変更は内部にあるため、まったく新しい概念を再度学ぶ必要はありません。

12
Tom Van Rompaey

ここにいるすべての人は、反応繊維で生まれるすべての新機能についてここですでに言及しました。反応繊維がそれ自体を改善するために行っているコアの変更を強調します。 Reactファイバーは、実際にはブラウザーによって実行されるさまざまなタスクの一時停止と再生を許可します。特定のタスクを別のタスクよりも優先します。

たとえば、バックグラウンドでデータを取得するのではなく、特定のアニメーションが重要な場合。アニメーションスタックを優先して実行スタックにプッシュします。アニメーションが完了するか、時間がかかりすぎると、データ取得タスクに切り替えることができます。これらの最新のブラウザーを許可するために、タスクを一時停止して再生できるようにするrequestIdleCallbackというAPIを開きました。 requestIdleCallback

反応する繊維が使用しているもの。これは、反応繊維がフードで使用しているものであり、驚くべきことです。

注:いくつかの点で正確でない場合があります。私はそこに修正がある場合、私は開いています

4
simbathesailor