Flutter 性能优化1

适用于无状态的组件

在Flutter 布局中，进程因为布局嵌套过多而提取成方法的形式实现，这样确实方便查看，但是当build重新构建的时候，提取的方法会跟随build重新构建，解决这类问题，可以把无状态变化的小部件定义为const，定义为const的小部件，只会创建一次。

初始代码

import 'package:flutter/material.dart';

class StatePage extends StatefulWidget {
  @override
  StatePageState createState() => new StatePageState();
}

class StatePageState extends State<StatePage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('状态管理'),
        centerTitle: true,
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            ActionChip(
              onPressed: add,
              backgroundColor: Colors.blue,
              label: new Text('$count'),
            ),
            Text('我没变化'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: new Icon(Icons.add),
        onPressed: add,
      ),
    );
  }

  void add() {
    setState(() {
      count += 1;
    });
  }
}

提取方法后

import 'package:flutter/material.dart';

class StatePage extends StatefulWidget {
  @override
  StatePageState createState() => new StatePageState();
}

class StatePageState extends State<StatePage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('状态管理'),
        centerTitle: true,
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            ActionChip(
              onPressed: add,
              backgroundColor: Colors.blue,
              label: new Text('$count'),
            ),
            _textView(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: new Icon(Icons.add),
        onPressed: add,
      ),
    );
  }

  Widget _textView() {
    print('test function build');
    return Text('我没变化');
  }

  void add() {
    setState(() {
      count += 1;
    });
  }
}

每次FloatingActionButton 点击更新count值后，StatePageState 中的build 会被重新构建，_textView方法也会同时被构建。

因为_textView本身就跟count没关系，所以我们期待的是，StatePageState中build 构建的时候不要重新构建 _textView ，这样就可以减少一次构建，减少GPU的调度。

这个时候我们可以使用const来定义不需要重新构建的小部件，定义为const后的小部件就不能有任何内容变化了，所以只适用于无状态改变的小部件

定义为const的代码

import 'package:flutter/material.dart';

class StatePage extends StatefulWidget {
  @override
  StatePageState createState() => new StatePageState();
}

class StatePageState extends State<StatePage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    print('test StatePageState build');
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('状态管理'),
        centerTitle: true,
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            ActionChip(
              onPressed: add,
              backgroundColor: Colors.blue,
              label: new Text('$count'),
            ),
            _TextView(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: new Icon(Icons.add),
        onPressed: add,
      ),
    );
  }
  
  void add() {
    setState(() {
      count += 1;
    });
  }
}

class _TextView extends StatelessWidget {
  const _TextView();

  @override
  Widget build(BuildContext context) {
    print('test _TextView build');
    return Text('我没变化');
  }
}

定义为const 的小部件 构造方法必须也要定义为const，运行查看日志可以发现，当FloatingActionButton点击修改count的值以后，_TextView部件中的build并没有再次被调用。