使用 Provider 实现 Flutter 的局部刷新，提高界面渲染性能

前言

在有些场景中，我们的组件只和状态管理的部分数据有关。举个例子，例如下面的动态详情界面。

底部有两个按钮：

• 点赞按钮：点击按钮后会增加点赞数，再次点赞会取消点赞并减少点赞数；
• 收藏按钮：点击按钮增加收藏数，再次点击会取消收藏并减少收藏数。

这个情况，如果我们使用 Provider 的 watch 方法监听状态对象的变化时，每次点击任意一个按钮都会导致整个界面刷新，这样不可避免会带来性能上的损耗。那有没有办法实现界面只监听与它有关的数据呢？本篇我们就来讲述如何实现监听状态的局部变化。

Provider 状态局部监听

Provider 提供了方法 R select<T, R>(R Function(T value) selector)来实现状态数据的局部变化，该方法接收一个 selector 函数参数，该函数的参数为 T，然后返回 R 类型值。也就是只监听状态数据的 R 部分数据，而不是监听全部数据。只有当 R 类型值发生改变时，才会通知依赖该数据的组件刷新，而其他不依赖该值的组件不会刷新。

详情页改造

我们新建一个 DynamicDet