Flutter局部刷新優化性能

局部刷新優化性能

Flutter狀態類：

• StatelessWidget：無狀態類，沒有狀態更新，界面一經建立沒法更改；
• StatefulWidget：有狀態類，當狀態改變，調用 setState()方法會觸發 StatefulWidget的UI狀態更新，自定義繼承 StatefulWidget的子類須重寫 createState()方法。

案例：

當咱們調用有狀態類的setState方法時會遍歷每個子Widget的State.build刷新狀態， 這將是一筆很大的性能開銷，因此咱們須要使用局部刷新來進行優化。

普通刷新方式

class TestRoute extends StatefulWidget {
  @override
  _TestRouteState createState() => _TestRouteState();
}

class _TestRouteState extends State<TestRoute> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return new FlatButton(
      onPressed: () {
        setState(() => count++);
      },
      child: new Text('$count'),
    );
  }
}

一個有狀態類定義一個變量而後按鈕的事件調用setState讓這個變量進行刷新，

使用GlobalKey局部刷新方式

咱們仍是用上面的例子，只是經過GlobalKey的方式只刷新局部的Text，

class TestRoute extends StatefulWidget {
  @override
  _TestRouteState createState() => _TestRouteState();
}

class _TestRouteState extends State<TestRoute> {
  int count = 0;

  GlobalKey<TextWidgetState> textKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new TextWidget(textKey), //須要更新的Text
        new FlatButton(
          onPressed: () {
            count++; // 這裏咱們只給他值變更，狀態刷新交給下面的Key事件
            textKey.currentState.onPressed(count);
          },
          child: new Text('按鈕 $count'),
        ),
      ],
    );
  }
}

// 封裝的文本組件Widget
class TextWidget extends StatefulWidget {
  final Key key;

  // 接收一個Key
  TextWidget(this.key);

  @override
  State<StatefulWidget> createState() => TextWidgetState();
}

class TextWidgetState extends State<TextWidget> {
  String _text = "0";

  @override
  Widget build(BuildContext context) {
    return new Text(_text);
  }

  void onPressed(int count) {
    setState(() => _text = count.toString());
  }
}

效果：

能夠明顯的看到按鈕的count並沒有變更，但須要更新的文本組件更新了值，已經完美實現了局部刷新。

實現原理：

textKey是一個GlobalKey類型的Key範型爲TextWidgetState（封裝的文本&&有狀態類）， 因此這個Key能夠經過currentState方法調用到類裏面的onPressed方法， 而onPressed方法恰好有調用setState來刷新局部狀態。

本文分享自微信公衆號 - flutter開發精選（Study_Knowledge）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。