Widgetの再構築

🤔Think

古いFlutterの本ですが、参考になる書籍を読んでいて、最近はアプリのパフォーマンスについても勉強してます。

rebuild 再構築について調べて考えてみた。

公式の長い解説は翻訳しながら見てみてください。

再構築を抑える方法について

公式に長い文章の中にも書いてありましたが、昔のFlutter本に書いてあった内容だと

• setState()メソッドを呼ぶと以下の現象が起きる
  • Widget Treeの再構築
  • Element Tree参照変更
  • RenderObjectの差分検証

少ないWidgetTreeの場合は、大した問題にならないとのことですが、巨大なWidget Treeになると無視できないそうです。この再構築を抑えることができると、パフォーマンスが改善されそうだと本に書いてありました。

つまり、StatefulWidgetを使いすぎたらダメってことでしょうね。setState()メソッドが呼ばれるたびに、無駄に再描画されてアプリのパフォーマンスが下がってします。

私の感覚だと、作っていたアプリの画面が固まってしまったことがありました。setStateの使いすぎで、画面が何度もrebuild 再構築されたことが原因だったのだろうと思いました。

パフォーマンスを落とさないようにするには、不要なrebuildを防ぐために、キャッシュするなどが効果的だそうです。constつけるとか、StreamBuilderを使うとか。

キャッシュといえば、Riverpodは、リアクティブキャッシュをしてくれるフレームワークだそうなので、使うとアプリのパフォーマンスは向上します。