面试题：Flutter中StatefulWidget与StatelessWidget在框架底层原理上的深入剖析

StatelessWidget

创建：
- 当使用StatelessWidget时，框架会为其创建一个对应的StatelessElement。StatelessWidget本身是不可变的，一旦创建就不会改变。例如：
```
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Text('This is a StatelessWidget');
  }
}
```
- 框架通过调用createElement方法创建StatelessElement，StatelessElement持有对StatelessWidget的引用。
更新：
- StatelessWidget没有状态，所以当父组件重建导致StatelessWidget所在位置的Widget改变时，框架会对比新旧StatelessWidget的runtimeType和key。如果runtimeType不同或者key不同，会创建新的StatelessElement和对应的RenderObject。如果runtimeType和key相同，框架会复用旧的StatelessElement，但不会更新StatelessWidget（因为它不可变）。
销毁：
- 当StatelessWidget不再被需要（例如父组件不再包含它），对应的StatelessElement会从Element树中移除，与之关联的RenderObject也会被销毁（如果没有其他引用）。

在Element树中，StatelessElement是轻量级的，它主要职责是配置和管理RenderObject。在RenderObject树中，StatelessWidget对应的RenderObject负责实际的渲染工作，如绘制文本、图形等。

StatefulWidget

创建：

当创建StatefulWidget时，框架首先创建一个StatefulElement。然后，StatefulElement会调用StatefulWidget的createState方法来创建一个State对象。例如：

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Text('This is a StatefulWidget');
  }
}

State对象持有对StatefulWidget的弱引用，并且State对象在其生命周期内保持不变，而StatefulWidget本身是不可变的。

更新：
- 当父组件重建导致StatefulWidget所在位置的Widget改变时，框架同样对比新旧StatefulWidget的runtimeType和key。如果runtimeType和key相同，框架会复用旧的StatefulElement和State对象，并调用State的didUpdateWidget方法，新的StatefulWidget会替换旧的StatefulWidget引用。此时State对象可以根据新的StatefulWidget属性更新UI。如果runtimeType或key不同，会创建新的StatefulElement和State对象，旧的State对象会调用dispose方法进行清理。
销毁：
- 当StatefulWidget不再被需要时，对应的StatefulElement从Element树中移除，State对象会调用dispose方法，在这个方法中可以进行资源清理，如取消动画、关闭流等操作。与之关联的RenderObject也会被销毁（如果没有其他引用）。

在Element树中，StatefulElement负责管理State对象和协调与RenderObject的交互。在RenderObject树中，StatefulWidget对应的RenderObject同样负责实际渲染，State对象可以通过setState方法触发RenderObject的更新。

相互作用机制及对应用开发的影响

相互作用机制：
- StatelessWidget和StatefulWidget都通过Element树与RenderObject树进行交互。Element树负责管理Widget的配置和生命周期，而RenderObject树负责实际的渲染。StatelessWidget侧重于不可变UI展示，而StatefulWidget通过State对象来管理可变状态，两者在Element树和RenderObject树中的行为不同，但共同协作完成应用的渲染。
对应用开发的影响：
- StatelessWidget：适用于不需要改变状态的UI部分，如展示固定文本、图标等。由于其不可变性，性能较好，因为框架可以更高效地复用Element和RenderObject。
- StatefulWidget：适用于需要动态更新UI的场景，如用户交互导致UI变化（按钮点击改变文本）。通过State对象管理状态，开发者可以灵活地控制UI更新，但由于状态管理的复杂性，需要注意避免不必要的重建，以优化性能。

星途面试题库

面试题：Flutter中StatefulWidget与StatelessWidget在框架底层原理上的深入剖析

知识考点

面试题答案

StatelessWidget

StatefulWidget

相互作用机制及对应用开发的影响