面试题：Flutter中StatefulWidget与StatelessWidget在构建UI时的应用场景分析

Question

在复杂的UI构建场景下，如何合理选择使用StatefulWidget和StatelessWidget？请结合实际项目案例，说明它们在数据更新、性能优化等方面的不同表现及应用策略。

Answer 1

StatelessWidget

1. 数据更新：StatelessWidget自身数据不可变，一旦创建，其属性（通过构造函数传入）就固定了。如果需要更新UI，只能通过父Widget重建来触发。例如在一个简单的展示用户名的组件中，用户名作为参数传入StatelessWidget，若用户名变化，需父Widget重新构建此组件。
2. 性能优化：由于其数据不可变，框架可以进行高效的缓存和复用。比如在一个列表中展示固定的图标，每个图标用StatelessWidget实现，框架可以复用这些图标Widget，提升性能。
3. 应用策略：适用于UI展示仅依赖于初始传入数据，且不会发生变化的场景。像展示静态文本、图标等组件。例如电商APP商品列表中商品的固定图片展示，商品图片地址作为参数传入StatelessWidget，图片展示不会因用户操作而动态改变，就适合用StatelessWidget。

StatefulWidget

1. 数据更新：StatefulWidget有一个与之关联的State对象，用于存储可变状态。可以在State对象中通过调用setState方法来触发UI更新。例如在一个计数器应用中，点击按钮增加计数，通过在State类中调用setState更新计数并刷新UI。
2. 性能优化：频繁调用setState会导致整个Widget树的重新构建，可能影响性能。因此在复杂场景下，要合理划分StatefulWidget，将需要频繁更新的部分单独提取为一个StatefulWidget，避免不必要的重绘。比如在聊天界面中，聊天输入框和聊天记录展示，聊天记录展示可单独作为一个StatefulWidget，输入框变化时不会导致聊天记录部分不必要的重绘。
3. 应用策略：适用于UI状态会随用户操作、网络请求等动态变化的场景。如表单输入、按钮点击状态变化等。像社交APP中的点赞按钮，点赞状态会根据用户点击动态改变，就适合用StatefulWidget实现。