何时在 Flutter 中使用 Provider.of<X> 与 Consumer<X>

Question

我仍然在思考 flutter 中的状态管理技术，对于何时以及为何使用 Provider.of<X> 与 Consumer<X> 有点困惑。我从 documentation 了解到（我认为）当我们想要访问数据时，在这两者之间进行选择时，您将使用 Provider.of，但您不需要 UI 进行更改。因此，以下内容（取自文档）可以访问数据并在新事件上更新 UI：

return HumongousWidget(
  // ...
  child: AnotherMonstrousWidget(// <- This widget will rebuild on new data events
    // ...
    child: Consumer<CartModel>(
      builder: (context, cart, child) {
        return Text('Total price: ${cart.totalPrice}');
      },
    ),
  ),
);

然而，如果我们只需要关于 UI 的数据，我们会使用 Provider.of<X> 并将 listen 参数设置为 false，如下：

Provider.of<CartModel>(context, listen: false).add(item); \Widget won't rebuild

但是，listen 不是必需的，因此以下内容也将运行：

Provider.of<CartModel>(context).add(item); \listener optional

所以这让我想到了几个问题：

这是区分Provider.of<X>和Consumer<X>的正确方法吗？前者不更新 UI，后者会？
如果 listen 未设置为 false，小部件将默认重建还是不重建？如果 listen 设置为 true 怎么办？
为什么 Provider.of 有重建 UI 的选项，而我们有 Consumer？

Answer 1

没关系。但要快速解释一下：

Provider.of是唯一获取和监听对象的方式。 Consumer、Selector 和所有 *ProxyProvider 调用 Provider.of 工作。

Provider.of 与 Consumer 是个人喜好问题。但两者都有一些争论

Provider.of

可以在所有小部件生命周期中调用，包括点击处理程序和 didChangeDependencies
不增加缩进

消费者

允许更精细的小部件重建
解决大多数 BuildContext 误用问题

Answer 2

使用它应该不会有任何性能问题，此外，如果我们只想在屏幕上更改某些特定的小部件，我们应该使用消费者。就编码实践而言，这是我能说的最好的方法。

 return Container(
    // ...
    child: Consumer<PersonModel>(
      builder: (context, person, child) {
        return Text('Name: ${person.name}');
      },
    ),
  );

与上面的示例一样，我们只需要更新 Single Text Widget 的值，因此将消费者添加到那里而不是其他小部件也可以访问的提供者。

注意：Consumer或Provider更新widget正在使用的实例的唯一引用，如果一些widget没有使用则不会重新绘制。

Answer 3

小部件 Consumer 没有做任何花哨的工作。它只是在一个新的小部件中调用 Provider.of，并将其构建实现委托给 [builder]。它只是 Provider.of 的语法糖，但有趣的是我认为 Provider.of 使用起来更简单。

查看这篇文章以获得更多许可 https://blog.codemagic.io/flutter-tutorial-provider/

Answer 4

您的问题：

这是区分Provider.of<X>和Consumer<X>的正确方法吗？前者不更新 UI，后者更新？

Provider.of<X> 取决于 listen 的值来触发小部件的新 State.build 和 State.didChangeDependencies 用于 StatefulWidget.

Consumer<X> 总是更新 UI，因为它使用 Provider.of<T>(context)，其中 listen 是 true。查看完整来源 here.

如果 listen 未设置为 false，小部件将默认重建还是不重建？如果 listen 设置为 true 怎么办？

默认值为 true，意味着将触发新的 State.build 小部件和 State.didChangeDependencies 用于 StatefulWidget。查看完整来源 here.

static T of<T>(BuildContext context, {bool listen = true}).

为什么 Provider.of 有重建 UI 的选项，而我们有 Consumer？

Rémi Rousselet 的 .

几乎涵盖了所有内容

Answer 5

Provider.of<>

正在应用提供程序，如果监听为真，整个小部件将重建。

消费者<>

仅使用消费者特别允许的小部件将重建。

Answer 6

我们有 3 件事要了解。

When you wrap Provider around a widget it sets up a reference to a widget tree and a variable whose changes you want to refer to.

使用 Provider.of(context) 您可以访问要监控的变量并在其中进行更改。

Provider.of(context) with and without listen gives you a reference to the above-declared Provider object and a widget tree where it can be accessed from. But as said by others, it rebuild the whole widget tree it sits on top of when listen is not false.

最后，您可以使用消费者监控使用上述步骤发生的任何更改

The consumer acts like a more granular listener and be applied to a fixed widget to help avoid unnecessary rebuilds.

何时在 Flutter 中使用 Provider.of<X> 与 Consumer<X>

When to use Provider.of<X> vs. Consumer<X> in Flutter

flutter

dart

flutter-provider

Provider.of

消费者

Provider.of<>

消费者<>