面试题：Flutter StatefulWidget状态持久化与性能优化

性能瓶颈分析

频繁重建：StatefulWidget每次状态变化时都会重建，若状态变化频繁，整个Widget树的重建会消耗大量资源，如CPU计算和内存分配，导致界面卡顿。
内存占用：大量状态持久化意味着需要更多内存来存储状态数据，可能引发内存紧张甚至内存泄漏，尤其在设备内存有限的情况下。
数据传递开销：若父Widget向StatefulWidget传递数据，状态持久化时每次重建都要重新传递数据，增加不必要的性能开销。

性能优化策略

使用AutomaticKeepAliveClientMixin：
- 对于需要保持状态但不常显示的Widget，混入该Mixin，重写 wantKeepAlive 方法返回 true，这样在Widget被移出屏幕时不会被销毁，减少重建次数。
局部状态管理：
- 将状态提升到合适的父Widget，使多个子StatefulWidget共享状态，减少每个子Widget单独管理状态带来的开销。同时，对于只在子Widget内部使用的状态，尽量在子Widget内部管理，避免不必要的状态提升。
不可变数据结构：
- 使用不可变数据结构存储状态，如Dart中的 final 和 const 修饰的数据，当状态变化时，通过创建新的不可变数据对象来更新状态，这样可以利用Flutter的Diff算法，更高效地对比和更新Widget树，减少不必要的重建。
ShouldRebuild优化：
- 在State类中重写 shouldRebuild 方法，通过比较新旧状态来判断是否真的需要重建Widget。只有在状态真正发生影响UI的变化时才重建，避免无意义的重建。

实际项目应用举例

使用AutomaticKeepAliveClientMixin：
- 假设应用中有一个分页显示的新闻列表页面，每个分页是一个StatefulWidget。当用户切换分页时，若不使用 AutomaticKeepAliveClientMixin，前一页的Widget状态会丢失，每次切换回来都要重新加载数据。
- 示例代码如下：

class NewsPage extends StatefulWidget {
  @override
  _NewsPageState createState() => _NewsPageState();
}

class _NewsPageState extends State<NewsPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    // 新闻列表构建代码
    return ListView.builder(
      itemCount: newsList.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(newsList[index].title),
        );
      },
    );
  }
}

局部状态管理：
- 比如一个购物车页面，有商品列表和总价显示。商品的选中状态等局部状态在商品子Widget管理，而总价计算等状态提升到购物车子Widget，这样商品状态变化时不会导致整个购物车页面重建。

class CartItem extends StatefulWidget {
  final Product product;
  CartItem(this.product);

  @override
  _CartItemState createState() => _CartItemState();
}

class _CartItemState extends State<CartItem> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      title: Text(widget.product.name),
      value: isChecked,
      onChanged: (value) {
        setState(() {
          isChecked = value;
        });
      },
    );
  }
}

class Cart extends StatefulWidget {
  @override
  _CartState createState() => _CartState();
}

class _CartState extends State<Cart> {
  List<Product> cartProducts = [];

  double calculateTotal() {
    return cartProducts.fold(0, (total, product) => total + product.price);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: cartProducts.length,
            itemBuilder: (context, index) {
              return CartItem(cartProducts[index]);
            },
          ),
        ),
        Text('Total: ${calculateTotal()}')
      ],
    );
  }
}

不可变数据结构：
- 假设应用中有一个待办事项列表，状态用一个List存储。当添加新事项时，使用不可变数据结构创建新的List。

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  List<String> todos = [];

  void addTodo(String newTodo) {
    setState(() {
      todos = [...todos, newTodo];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          onSubmitted: (value) {
            addTodo(value);
          },
        ),
        Expanded(
          child: ListView.builder(
            itemCount: todos.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(todos[index]),
              );
            },
          ),
        )
      ],
    );
  }
}

ShouldRebuild优化：
- 假设有一个显示用户信息的Widget，只有当用户信息中影响显示的部分（如姓名、头像等）变化时才重建。

class UserInfo extends StatefulWidget {
  final User user;
  UserInfo(this.user);

  @override
  _UserInfoState createState() => _UserInfoState();
}

class _UserInfoState extends State<UserInfo> {
  @override
  bool shouldRebuild(covariant UserInfo oldWidget) {
    return oldWidget.user.name != widget.user.name || oldWidget.user.avatar != widget.user.avatar;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CircleAvatar(
          backgroundImage: NetworkImage(widget.user.avatar),
        ),
        Text(widget.user.name)
      ],
    );
  }
}

星途面试题库

面试题：Flutter StatefulWidget状态持久化与性能优化

知识考点

面试题答案

性能瓶颈分析

性能优化策略

实际项目应用举例