基本的なフラッター: Widget Tree、 Element Tree と Render Tree
このシリーズの前回の投稿を読んだ後、実際にどのようにwidgetを再構築する方法に疑問を抱いているかと思います。 各widgetには独自のビルド関数があり、頻繁に呼び出されます。 この再構築から完了までの間に、パフォーマンスの何パーセントを消費しましょうか？ これらすべてに答えられるために、Element Tree, Widget Tree と Render Treeを理解する必要があります。そして、Flutterの build(){…}メソッドを実行する方法、画面上の情報を再構築または変更する方法も理解することも必要です。 本当に何が起こったのでしょうか？ Flutterは、build(){…} メソッドが呼び出されるたびに、UI全体を再描画または再作成するわけではありません。 それは、詳しく話しましょう。 Flutterで作成されたアプリケーションのデフォルト構成は60FPS（Frames Per Second）です。 つまり、Flutterシステムは毎秒60回インターフェイスを再描画します。 これは、Flutterが1秒間に60回レイアウト全体を再計算しなければならない場合にのみ、非効率になります。 Flutterが初めて画面に何かを描画する場合、画面上のすべてのコンポーネントの位置、色、テキストなどを計算する必要があります。要するに、最初のインターフェイスを描画する時、Flutterは画面上のそれぞれのピクセルを編集しなければなりません。 次回の編集/描画では、何も変更されていない場合にUIを更新するために、Flutterは既存の古い情報を取得し、画面上に超高速かつ非常に効率的に描画します。 その為に、再描画の速度が問題になく、Flutterが更新のたびに画面上のすべてを再計算する必要がある場合にのみ、問題になります。 では、この記事で、Flutterがbuild(){…}メソッドが呼び出されるたびにすべてを再計算するかどうかという内容を詳細に理解しましょう！ Widget Tree 簡単に言えば、Widget Tree というのは、アプリケーションの構築に使用されているすべてのWidgetです。つまり、書いたコードからwidget treeが作成されます。 それは完全に管理できます。widgetを宣言して、それらを一緒にネストすることで要望のレイアウトを作成します。 build（）{…}メソッドを呼び出す時に、FlutterでWidget Treeがビルドされます。 Flutterシステムは、この部分を独自に処理します。 画面に表示されるだけではありません。 代わりに、Flutterまでに次回画面に何を描画するかと指示します。 Widget treeは頻繁に再構築されます。 Element Tree Element Tree はWidget Treeにバインドされ, 実際に表示されているオブジェクト/要素と設定される情報です。再構築することはめったにありません。 Element Tree は別の方法で管理され、build(){…} メソッドが呼び出されても再構築されません。 Widget Treeの各 Widgetで、FlutterはそのWidgetのelementを自動的に作成します。 FlutterがWidgetを初めて処理するとすぐに実行されます。 ここで、elementは、Flutterによってメモリ内で管理されるオブジェクトであると言えます。Widget TreeのWidgetに関連します。 Elementは、ターミナルインターフェイスパラメータがあるWidget（Widget Tree内）への参照を1つだけ保持します。 Render Tree Render Tree は、画面に表示されるelement /オブジェクトを表します。 Render Tree も頻繁に再構築されません！
Read More
Recent Comments