🧬

FlutterのElementとは何なのか?

2024/07/27に公開

👤対象者

  • Elementって何なのか知りたい?
  • もっとわかりやすい情報はないのか???

What is Element class???

Element class
ツリーの特定の場所にあるウィジェットのインスタンス化。

ウィジェットはサブツリーの構成方法を記述しますが、ウィジェットは不変であるため、同じウィジェットを使用して複数のサブツリーを同時に構成できます。エレメントは、ツリー内の特定の場所を構成するためのウィジェットの使用を表します。例えば、親ウィジェットが再構築され、この場所に新しいウィジェットが作成された場合などです。

要素はツリーを形成します。ほとんどの要素は一意の子を持ちますが、一部のウィジェット(RenderObjectElementのサブクラスなど)は複数の子を持つことができます。

要素のライフサイクルは次のとおりです:

  • フレームワークは、要素の初期構成として使用されるウィジェットで Widget.createElement を呼び出して要素を作成します。
  • フレームワークは、mount を呼び出して、新しく作成された要素を、指定された親の指定されたスロットのツリーに追加します。mount メソッドは、子ウィジェットを膨張させ、必要に応じて attachRenderObject を呼び出して、関連するレンダーオブジェクトをレンダーツリーにアタッチします。
  • この時点で、要素は「アクティブ」とみなされ、画面に表示されます。
    ある時点で、親がこの要素を構成するために使用するウィジェットを変更することを決定するかもしれません。この場合、フレームワークは新しいウィジェットで update を呼び出します。新しいウィジェットは、常に古いウィジェットと同じ runtimeType と key を持ちます。親が、ツリーのこの位置のウィジェットの runtimeType または key を変更したい場合、この要素をアンマウントして、この位置の新しいウィジェットを膨張させることで、変更できます。
  • ある時点で、先祖がこの要素(または中間先祖)をツリーから削除することを決定するかもしれない。先祖は、それ自身に対してdeactivateChildを呼び出すことによってそれを行う。中間の先祖を非アクティブにすると、その要素のレンダーオブジェクトがレンダーツリーから削除され、この要素がオーナーの非アクティブ要素のリストに追加され、フレームワークがこの要素で非アクティブ化を呼び出します。
  • この時点で、要素は「非アクティブ」とみなされ、画面には表示されません。

ここから、リンクがいっぱいあって、見てくれとのことみたいだ...

リクルートさんの解説を見た方が早いかも

感想

Flutterのエレメントを3行で説明すると:

  1. エレメントはウィジェットのインスタンス化で、ウィジェットツリーの特定の位置を表します。
  2. ウィジェットが不変なのに対し、エレメントは状態を持ち、画面上の実際の要素を管理します。
  3. エレメントはウィジェットとレンダーオブジェクトを橋渡しし、ライフサイクル(作成、マウント、更新、非アクティブ化)を持ちます。

リクルートさんの記事の文章を引用すると...

Elementとは、UIの状態を管理する、stateをもつmutableなオブジェクトです。

Elementクラスは、UIの状態を管理してくれるstate(状態)を持っているmutable(可変。変わるもの)なオブジェクト。

1行で表現するなら:
UIの状態を管理してくれる変化するオブジェクトってことみたいですね。

Discussion