面试题：Flutter中StatefulWidget与StatelessWidget的主要区别

Question

请详细阐述Flutter中StatefulWidget与StatelessWidget在状态管理、生命周期以及性能表现方面的主要区别。

Answer 1

状态管理

• StatelessWidget：
  • 状态不可变，一旦创建，其属性（final修饰）就不能改变。适用于展示固定内容，如文本标签、图标等，不需要在运行时改变状态。
  • 它没有内部状态，依赖外部传入的数据来构建UI。如果外部数据改变，会重新构建整个StatelessWidget。
• StatefulWidget：
  • 状态可变，允许在组件的生命周期内改变其状态。通过State类来管理状态，State类包含可变状态的存储和修改逻辑。
  • 可以根据用户交互、网络请求结果等动态更新UI，而不需要重新创建整个组件，只需要更新State，然后调用setState方法通知Flutter框架进行UI刷新。

生命周期

• StatelessWidget：
  • 生命周期简单，只有build方法。每次父组件重建导致该StatelessWidget被重新构建时，都会调用build方法来创建新的UI。没有像initState、dispose等生命周期方法，因为其状态不可变，不需要额外的初始化和清理操作。
• StatefulWidget：
  • 具有丰富的生命周期方法：
    • createState：创建关联的State对象，每个StatefulWidget都会对应一个State对象。
    • initState：在State对象插入到树中时调用，只调用一次，用于初始化状态，如订阅数据、初始化动画控制器等。
    • didChangeDependencies：当State对象的依赖关系发生变化时调用，例如InheritedWidget数据发生改变。在initState之后也会调用一次。
    • build：构建UI，每当状态改变（调用setState）或者依赖的InheritedWidget改变时会被调用。
    • setState：用于通知框架状态发生变化，触发UI重建。只有调用该方法，build方法才会被重新调用以更新UI。
    • didUpdateWidget：当父组件传递给该StatefulWidget的参数发生变化时调用，可在此方法中处理旧参数到新参数的过渡逻辑。
    • deactivate：当State对象从树中移除时调用，如在路由切换时，该组件可能会暂时移除。
    • dispose：当State对象从树中永久移除时调用，用于清理资源，如取消动画、取消订阅等。

性能表现

• StatelessWidget：
  • 性能相对较高，因为其简单，不需要维护复杂的状态管理逻辑和生命周期。每次重建时，直接重新构建整个组件，由于没有状态变化的跟踪和管理开销，在一些简单UI场景下渲染速度快。但如果频繁重建且组件复杂，性能可能会受影响。
• StatefulWidget：
  • 由于需要管理状态和复杂的生命周期，性能开销相对较大。不过，通过合理使用setState方法，只在状态真正改变时触发UI重建，避免不必要的重建，也能保持较好的性能。如果状态管理不当，频繁调用setState导致不必要的UI重建，会降低性能。