Flutter中reprojection pattern与member variable概念及示例说明

成员变量（member variable） #

指定义在类内部、和类实例生命周期绑定的变量。和build方法内定义的局部变量不同，它不会在每次方法执行时重新创建，只要所属的Widget/State实例没被销毁，变量存储的对象引用、值就会一直保留。在Flutter开发中，这类变量一般在State类初始化、initState回调，或者StatelessWidget的构造函数中完成赋值。

重投影模式（reprojection pattern） #

这是基于Flutter框架原生更新规则实现的性能优化方案，核心逻辑依托Flutter的Element遍历短路机制：

由于Widget天生不可变，Element树更新时，如果某个Element自身没有被标记为dirty状态，且父组件传入的新Widget和旧Widget是同一个对象引用，Element会直接终止当前节点及下属所有子节点的build遍历，完全跳过子树重建流程。整个一致性判定只需要对比两个Widget的内存引用，开销极低。

重投影模式就是对这个规则的直接利用：提前把不依赖当前组件状态、不需要随build更新的子Widget构建完成，存为类的成员变量，每次执行build时直接返回这个缓存好的Widget引用即可。这样父组件每次重建，传给子节点的都是同一个Widget对象，会直接触发Element的短路逻辑，避免无意义的子组件重建，大幅降低复杂子树的渲染开销。

我们先看未优化的反面写法：每次父组件setState触发重建时，哪怕长列表组件完全不依赖变化的计数状态，也会跟着反复执行build，产生无效开销。

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('当前计数：$_counter'),
            // 每次build都会重新创建_HomeListWidget实例，无法触发短路优化
            _HeavyListWidget(listTitle: '固定不变的长列表'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

// 模拟构建开销较大的长列表组件
class _HeavyListWidget extends StatelessWidget {
  final String listTitle;
  const _HeavyListWidget({required this.listTitle});

  @override
  Widget build(BuildContext context) {
    // 未优化时每次点击按钮都会打印这句话，证明组件被无效重建
    debugPrint('长列表组件执行build');
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          Text(listTitle),
          for (int i = 0; i < 1000; i++) Text('列表项$i'),
        ],
      ),
    );
  }
}

下面是使用重投影模式的优化写法，用成员变量缓存固定子组件：

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  // 成员变量缓存：初始化时就构建好不变的长列表组件，后续不会重新创建
  final Widget _heavyList = const _HeavyListWidget(listTitle: '固定不变的长列表');

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('当前计数：$_counter'),
            // 每次build直接返回缓存的同一个Widget引用，触发Element短路
            _heavyList,
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

// 长列表组件代码保持不变
class _HeavyListWidget extends StatelessWidget {
  final String listTitle;
  const _HeavyListWidget({required this.listTitle});

  @override
  Widget build(BuildContext context) {
    // 优化后仅在首次加载时打印一次，后续点击按钮不会触发build
    debugPrint('长列表组件执行build');
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          Text(listTitle),
          for (int i = 0; i < 1000; i++) Text('列表项$i'),
        ],
      ),
    );
  }
}

• 该模式仅适用于完全不依赖当前build上下文参数、不随组件状态变化的子Widget，如果子组件需要依赖build过程中生成的变量（比如示例中随点击变化的_counter），不能用固定成员变量缓存，否则会出现内容不更新的问题。
• const修饰的常量Widget本身也能触发同样的短路优化，重投影模式主要用于无法使用const构造的场景——比如子组件需要传入运行时才能获取的固定参数（比如初始化时读取的本地配置值），没法声明为编译时常量，就可以用成员变量缓存实现同等优化效果。
• 如果缓存的子Widget需要响应父组件的配置变化，可以在initState、didUpdateWidget生命周期中手动更新成员变量存储的Widget引用，只要保证无变化时返回同一引用即可触发优化。

内容的提问来源于stack exchange，提问作者May