架构原则

这一课你将能做到

1. 说清楚 Widget 树、Element 树、RenderObject 树三者的关系和职责
2. 解释 build() 何时被调用、为什么 setState 之后 UI 会刷新
3. 通过组合（Composition）而不是继承来组织 Flutter 代码，并理解「性能 = 减少不必要的 rebuild」

为什么要学

不理解三棵树，就只能在表象层调代码：为什么 setState 没生效？为什么这个 GlobalKey 报重复？为什么这个 build 跑了 60 次？理解了底层模型，这些问题看一眼就懂。

人话：Widget 是「设计图」，Element 是「工地项目经理」，RenderObject 是「真正干活的工人」。图纸改了，项目经理对比新旧图纸，告诉工人改哪里。

先建立图像

Widget 树（不可变配置）        Element 树（可变实例）       RenderObject 树（实际渲染）
   Text('A')              ←──  StatefulElement        ──→   RenderParagraph
   Container(...)         ←──  StatelessElement       ──→   RenderDecoratedBox
   MyButton(...)          ←──  StatefulElement        ──→   RenderFlex ...

每次 setState，Flutter 都生成一棵新的 Widget 树，与老的 Element 树 diff，能复用就复用，需要更新就更新 RenderObject。

跟着做

步骤 1：观察 build 何时被调用

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) =>
      const MaterialApp(home: Scaffold(body: DemoPage()));
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});
  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  int _a = 0;

  @override
  Widget build(BuildContext context) {
    debugPrint('父 build');
    return Column(
      children: [
        ElevatedButton(
          onPressed: () => setState(() => _a++),
          child: Text('a=$_a'),
        ),
        const Child(),          // const 子
        ChildNonConst(),        // 非 const 子
      ],
    );
  }
}

class Child extends StatelessWidget {
  const Child({super.key});
  @override
  Widget build(BuildContext context) {
    debugPrint('  const Child build');
    return const Text('const 子');
  }
}

class ChildNonConst extends StatelessWidget {
  ChildNonConst({super.key});
  @override
  Widget build(BuildContext context) {
    debugPrint('  非 const Child build');
    return const Text('非 const 子');
  }
}

运行 → 点按钮，控制台输出：

父 build
  非 const Child build

const Child 没有 rebuild —— 因为它的 Widget 实例没变，Element diff 时直接复用。这就是 const 的收益。

步骤 2：用 Element 验证「复用」