Flutter StatefulWidget、StatefulElement和State的关系

StatefulWidget、StatefulElement和State的关系.

demo代码,下面用的demo相关对象都是指的是这个demo里的对象

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('只是一个demo'),
      ),
    );
  }
}

StatefulWidget

有两个主要方法: createState 和 createElement,分别用来创建state和element

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);

  //这里传入当前widget,在StateElement里绑定widget和element到state
  @override
  StatefulElement createElement() => StatefulElement(this);

  //这个方法由子类重写, 就是开头demo里的_DemoState createState() => _DemoState();
  @protected
  State createState();
}
@override
StatefulElement createElement() => StatefulElement(this); //这里的this是当前的StatefulWidget对象

StatefulElement

StatefulWidget所对应的element,

class StatefulElement extends ComponentElement {
  StatefulElement(StatefulWidget widget)
      //这里的createState就是demo里子类重写的createState
      //_DemoState createState() => _DemoState();
      //_state 就是创建的_DemoState对象
      : _state = widget.createState(),
        super(widget) {
        //这里把_element和_widget绑定到_DemoState上
        //这里的_element就是 _DemoState build方法里的context
        //这里的_widget就是 _DemoState里的widget,也就是继承StatefulWidget的Demo
    _state._element = this;
    _state._widget = widget;
  }

  //_state.build 就是_DemoState里重写的build方法,这里的this就是build(BuildContext context) 里的context
  @override
  Widget build() => _state.build(this);

  State<StatefulWidget> get state => _state;
  State<StatefulWidget> _state;

}

相关其他代码待补充