Flutter 中如何对 setState() 调用进行局部化处理？

「setState() 局部化」的含义 #

核心是指仅在UI实际需要变更的最小子树对应的State中调用setState()，避免在组件树的高层级（比如页面根组件）调用setState()触发大面积无效重建。
结合官方文档的规则：一旦某个State调用setState()，其下挂载的所有子widget都会执行build方法重建。如果变化的UI只占整棵子树的极小部分，高层调用setState()会导致大量完全不需要更新的widget被迫重建，浪费性能，局部化就是为了把重建范围压缩到最小。

实际开发中的实现方式 #

• 拆分状态到独立子组件：把需要变化的UI模块单独封装为StatefulWidget，状态管理和setState()调用都封闭在这个子组件内部，外层父组件不需要感知这部分状态变化，自然不会触发父层整体重建。比如页面中只有一个开关按钮的状态需要切换，就把开关单独抽成独立组件，点击切换状态时只在开关自身的State中调用setState()，页面其他部分完全不受影响。
• 采用ValueNotifier+ValueListenableBuilder实现无setState()的局部更新：对于不需要拆分组件的轻量场景，可以把可变状态用ValueNotifier包裹，仅用ValueListenableBuilder包裹需要更新的UI片段，状态变化时只会重建Builder内部的UI，不会触发外层组件的build方法，示例如下：

// 定义可变状态
final ValueNotifier<int> counter = ValueNotifier(0);

// 构建UI时仅包裹需要更新的部分
@override
Widget build(BuildContext context) {
  // 外层其他UI不会被counter变化影响
  return Row(
    children: [
      const Text('计数器：'),
      ValueListenableBuilder<int>(
        valueListenable: counter,
        builder: (context, value, child) {
          return Text('$value');
        },
      ),
      ElevatedButton(
        onPressed: () => counter.value++,
        child: const Text('加1'),
      )
    ],
  );
}

• 给不需要变化的组件加const修饰：即便父组件意外触发了重建，被const修饰的无状态组件/状态组件的child不会重复执行build方法，可以进一步降低无效重建的概率。
• 禁止无差别在页面级State中调用setState()：除非确定整个页面的UI都需要刷新，否则所有局部状态变更都下沉到对应的子模块内部处理，页面层只负责全局状态的传递和初始化。

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