Flutter有状态组件StatefulWidget生命周期详解

/// 无状态组件的定义
class MyApp extends StatelessWidget {}
/// 有状态状态组件的定义
class MyApp extends StatefullWidget {
  @override
  State<StatefulWidget> createState() => _MyApp();
}
class _MyApp extends State<MyApp> {}

class MyApp extends StatelessWidget {
  /// 常量属性，不加final会警告
  final String? title;
  const MyApp({Key? key, this.title}) : super(key: key);
}
/// or
class MyApp extends StatefulWidget {
  /// 常量属性，不加final会警告
  final String? title;
  const MyApp({Key? key, this.title}) : super(key: key);
  @override
  State<StatefulWidget> createState() => _MyApp();
}
/// 调用时可以加const
const MyApp()

/// StatefulWidget demo
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class ColorInheritedWidget extends InheritedWidget {
  final Color color;
  const ColorInheritedWidget({
    Key? key,
    required this.color,
    required Widget child,
  }) : super(key: key, child: child);
  @override
  bool updateShouldNotify(covariant ColorInheritedWidget oldWidget) {
    return oldWidget.color != color;
  }
  static ColorInheritedWidget? of(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType<ColorInheritedWidget>();
}
class MyApp extends StatefulWidget {
  final String? title;
  const MyApp({Key? key, this.title}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    print('createState');
    return _MyApp();
  }
}
class _MyApp extends State<MyApp> {
  int value = 0;
  bool isDetach = false;
  Color color = Colors.red;
  @override
  void initState() {
    super.initState();
    print('initState');
  }
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('didChangeDependencies');
  }
  @override
  void didUpdateWidget(covariant MyApp oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('didUpdateWidget');
  }
  @override
  void deactivate() {
    super.deactivate();
    print('deactivate');
  }
  @override
  void dispose() {
    super.dispose();
    print('deactivate');
  }
  @override
  Widget build(BuildContext context) {
    print('build');
    return ColorInheritedWidget(
      color: color,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('StatefulWidget demo'),
          ),
          body: Column(
            children: [
              if (!isDetach) MyAppChild(value: value),
              MaterialButton(
                color: Colors.blue,
                onPressed: () {
                  value++;
                  setState(() {});
                },
                child: const Text('更新value'),
              ),
              MaterialButton(
                color: Colors.blue,
                onPressed: () {
                  color = color == Colors.red ? Colors.yellow : Colors.red;
                  setState(() {});
                },
                child: const Text('更新color'),
              ),
              MaterialButton(
                color: Colors.blue,
                onPressed: () {
                  isDetach = !isDetach;
                  setState(() {});
                },
                child: Text(isDetach ? '添加' : '移除'),
              )
            ],
          ),
        ),
      ),
    );
  }
}
class MyAppChild extends StatefulWidget {
  final int value;
  const MyAppChild({Key? key, required this.value}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    print('child-createState');
    return _MyAppChild();
  }
}
class _MyAppChild extends State<MyAppChild> {
  @override
  void initState() {
    super.initState();
    print('child-initState');
  }
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('child-didChangeDependencies');
  }
  @override
  void didUpdateWidget(covariant MyAppChild oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('child-didUpdateWidget');
  }
  @override
  void deactivate() {
    super.deactivate();
    print('child-deactivate');
  }
  @override
  void dispose() {
    super.dispose();
    print('child-dispose');
  }
  @override
  Widget build(BuildContext context) {
    print('child-build');
    return Container(
      width: 100,
      height: 100,
      color: ColorInheritedWidget.of(context)?.color,
      child: Text('${widget.value}'),
    );
  }
}

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key? key }) : super(key: key);
  @override
  StatefulElement createElement() => StatefulElement(this);
  /// ...    
}

class StatefulElement extends ComponentElement {
  StatefulElement(StatefulWidget widget)
      : _state = widget.createState(),
        super(widget) {
            state._element = this;
            state._widget = widget;
        }
  /// ...
}

/// StatefulElement
  @override
  void _firstBuild() {
    try {
      /// 调用initState
      final Object? debuGCheckForReturnedFuture = state.initState() as dynamic;
    } finally {
      /// ...
    }
    /// 调用didChangeDependencies
    state.didChangeDependencies();
    /// 调用父级ComponentElement类的_firstBuild，再往上到Element的rebuild方法，最后触发的是StatefulElement中的perfORMRebuild方法。
    super._firstBuild();
  }
  @override
  void performRebuild() {
    /// _didChangeDependencies标记Element的依赖节点发生改变，didChangeDependencies会再次调用。
    if (_didChangeDependencies) {
      state.didChangeDependencies();
      _didChangeDependencies = false;
    }
    /// 调用ComponentElement中的performRebuild，最终触发StatefulElement的build方法
    super.performRebuild();
  }
  @override
  Widget build() => state.build(this);

/// StatefulElement
  @protected
  @pragma('vm:prefer-inline')
  Element? updateChild(Element? child, Widget? newWidget, Object? newSlot) {
    /// ...
    final Element newChild;
    if (child != null) {
      bool hasSameSuperclass = true;
      if (hasSameSuperclass && child.widget == newWidget) {
        newChild = child;
      } else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)) {
        /// 更新逻辑会调用child的update方法
        child.update(newWidget);
        newChild = child;
      }  
    } 
    return newChild;
  }

/// StatefulElement
  @override
  void update(StatefulWidget newWidget) {
    super.update(newWidget);
    try {
      /// 调用state.didUpdateWidget
      final Object? debugCheckForReturnedFuture = state.didUpdateWidget(oldWidget) as dynamic;
    }
    /// 重新rebuild深入遍历子组件
    rebuild();
  }