AGグリッドの新しい反応レンダリングエンジン概要

AGのグリッドのバージョン26.0.0は、私たちの新しい反応UIの最初の公開イデアルを含んでいます-純粋な反応で書かれたAgグリッドのためのレンダリングエンジン.
反応でレンダリングする前のアプローチは、カスタムコントロールのポータルを使用してJavaScriptのレンダリングエンジンの周りラッパーです.
新しいアプローチは、反応プログラマのために多くの利益をもたらします.

反応の開発ツールのコンポーネントを表示する現在の反応成分の全体を使用して表示されます.

反応プロファイラは、AGグリッドレンダリングエンジンは、レンダリングサイクルに非常に効率的であり、プロファイラのすべてのコンポーネントとグリッドの一部を示しています.

プロパティと状態は、反応のアプリケーションを期待して反応階層を通過することができます.

あなたは、ドキュメントの反応UIの完全な詳細を見つけることができます.

https://www.ag-grid.com/react-data-grid/reactui/

このブログ記事は、変更の概要を示します.

Demo of ReactUI

Subtle DOM Rendering Difference

What a Tooling Difference the ReactUI Makes

Profiling React UI

Backwards Compatibility

Enabling the React UI

Core Work Done

Reactuiのデモ

以下のライブデモでは、新しい反応UIをオンとオフを切り替えることができます各セルには、カスタムセルレンダラが書き込まれます.また、セルの再描画をトリガするメダル番号を増やすためにボタンをクリックします.
デモでは、お勧めします.

devのツールを開き、DOMを見て新しいUIモードがどうやってDOMを変更するかを確認します.

反応devツールをインストールすると、コンポーネントのビューは、完全な反応の実装との違いを強調表示します.

あなたがソートし、列を再注文するときの影響を確認するプロファイルを使用します.

また、[データ]グリッドがレンダリングの影響を最小限に抑えるために最適化されていることを確認する[増加メダル]ボタンをクリックします.

ライブデモを見るstandalone preview by clicking here .
ローカルでコードを試してみたい場合はreact-data-grid リポジトリreactui-demo directory .

微妙なDOMレンダリング差

AGグリッド対応UIは、カスタムコンポーネントを表示するポータルを使用しません.以前はグリッドは、すべてのコンポーネントを反応ポータル内のすべてのコンポーネントをDOMビューでラップされたag-react-container .
今、すべての反応コンポーネントは、ラッパーなしでDOM階層に直接にあります.
この変更は、コンポーネントのレンダリング最適化を改善します.

どのようなツールの違い

バージョン26.0.0および完全に反応するデータグリッドレンダリングエンジンを使用すると、次のビューを参照してください.

我々はそれに反応アプリケーションを使用するときに使用されているので、それは大きなように思われませんが、これは、AGのグリッドを使用して反応の開発者のための重要な変更です.
Agのグリッド反応UIは完全に反応生態系を受け入れている.
以前のバージョンのAGグリッドでは、バージョン26を使用してReactuiをオフにすると、'遺産'レンダラが表示されます.

- App
    - AgGridReact
        - AgGridReactLegacy

そして、DOMは以下のような反応コンポーネントを表示します.

Anonymous key="agPortalKey_1"

プロファイルの反応

我々は現在、Agグリッドを使用して反応プロファイラーにフルアクセスしている.

グリッドのすべての部分はプロファイラで表示され、我々はすぐにどのようにコンポーネントは、グリッドと連携して動作を見ることができます.
また、グリッドが最適化され、プロファイラーからの情報を使用して最適化の努力を集中する方法を見ることができます.

後方互換性

反応UIは反応のためのレンダリングエンジンです.我々の角度、Vue、およびJavaScriptエンジンは同じままです;我々はサポートし、それらを強化し続けます.
加えて、我々の反応UIは、反応データグリッド内のJavaScriptのコンポーネントを使用し続けることができます.
我々は、我々の企業の顧客の多くは、反応、角度とVueを使用してAgグリッドを使用して、各テクノロジで使用する共有JavaScriptコンポーネントを作成することにより、クロスフレームワークの互換性を活用して知っている.我々は、反応UIのJavaScriptコンポーネントを再利用し続けることを容易にしました.

を有効にするUI

グリッドデータをレンダリングするには、グリッド構成の1行を使用します.

reactUi={true}

コアワーク

バージョン26コアコア、行、セルのレンダリングをカバーします.すべてのカスタムセルレンダラとセルエディタが動作します.これは生産準備です.
我々はまだ全体のグリッドを反応させるためにする仕事を持っています、しかし、これはグリッドの他の部分(例えばヘッダー、ツールチップとツール・パネル)でカスタム構成要素でプロジェクトに影響を及ぼすだけです.
全反応実施のための現在の見積りは2021年12月である.
反応UIの完全な詳細については、ドキュメントでは、多くの実行可能な例では、アクションの新しい反応UIを見ることができます.

Experiment with the demo on StackBlitz

Experiment with the code from the React Data Grid repo

Learn more about ReactUI in the documentation

ビデオ