面试题：Flutter混合使用StatefulWidget与StatelessWidget的架构设计考量

1. StatefulWidget 与 StatelessWidget 的特点

StatelessWidget：不可变，状态不能改变。当Widget的状态和配置信息在其生命周期内保持不变时使用，优点是性能高，因为不需要管理状态变化。
StatefulWidget：可变，状态可以改变。当Widget的状态在其生命周期内会发生变化时使用。

2. 确保代码可维护性

StatelessWidget 应用策略：
- 用于展示静态内容的组件，如标题栏、简单文本标签等。例如一个展示应用名称的组件，其内容不会改变，就可以写成 StatelessWidget。
```
class AppTitle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('My App Name');
  }
}
```

StatefulWidget 应用策略：

用于管理用户交互状态的组件。比如一个开关按钮，用户点击会改变其状态，就使用 StatefulWidget。

class SwitchButton extends StatefulWidget {
  @override
  _SwitchButtonState createState() => _SwitchButtonState();
}

class _SwitchButtonState extends State<SwitchButton> {
  bool isSwitched = false;
  @override
  Widget build(BuildContext context) {
    return Switch(
      value: isSwitched,
      onChanged: (value) {
        setState(() {
          isSwitched = value;
        });
      },
    );
  }
}

3. 性能方面

StatelessWidget：由于不需要管理状态变化，渲染开销小。在列表项等大量重复且状态不改变的场景下使用 StatelessWidget 可以提高性能。例如展示商品列表中的商品项，如果商品信息不发生变化，每个商品项可以是 StatelessWidget。

class ProductItem extends StatelessWidget {
  final Product product;
  ProductItem(this.product);
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(product.name),
      subtitle: Text(product.price.toString()),
    );
  }
}

StatefulWidget：当状态变化频繁时，合理使用 setState 方法局部更新状态，避免不必要的全量渲染。例如在一个聊天输入框，只需要更新输入的文本状态，而不是整个聊天界面。

4. 可扩展性

StatelessWidget：易于复用，可在不同页面中使用相同的 StatelessWidget。例如一个通用的加载指示器，可在多个页面加载数据时使用。

class LoadingIndicator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator();
  }
}

StatefulWidget：通过抽象状态管理逻辑，如使用 Provider 等状态管理库，可以实现跨页面的状态共享和扩展。例如在一个多页面的电商应用中，购物车的状态管理就可以通过 StatefulWidget 结合状态管理库实现。

星途面试题库

面试题：Flutter混合使用StatefulWidget与StatelessWidget的架构设计考量

知识考点

面试题答案

1. StatefulWidget 与 StatelessWidget 的特点

2. 确保代码可维护性

3. 性能方面

4. 可扩展性