Flutter中各种Consumer的区别和使用场景

在项目中,遇到了各种Consumer,刚开始的时候还不知道他们有什么区别,后面通过一些开发实践逐渐摸清楚了他们之间的区别和使用场景。
首先,这些Consumer来源于riverpod这个库,主要是提升开发者对provider的使用,便于获取provider,实现相关的状态管理。

1. ConsumerWidget

是一个StatefulWidget,但是不需要我们去实现相关的Widget和State。内部已经帮我们封装实现好了。使用时,只要继承ConsumerWidget,实现Widget build(BuildContext context, WidgetRef ref);函数即可。然后通过ref获取需要的provider

2. Consumer

是对ConsumerWidget的进一步封装。对于一些Widget我们不想去新建一个类来继承ConsumerWidget,那我们可以使用Consumer来包裹Widget。
例子:

Consumer(
    builder: (context, ref, child) {
        final value = ref.watch(helloWorldProvider);
        return Text(value);
    },
);

3. HookConsumerWidget

HookConsumerWidget是HookWidget和ConsumerWidget的结合。HookWidget的主要作用是在封装好的StateLessWidget,实现一些需要initState或者dispose回调的一些方法,比如AnimationController或者是做一些缓存。
而ConsumerWidget虽然是StatefulWidget,但是没办法回调initState和dispose,所以通过将HookConsumerWidget,就可以在使用Consumer的时候,实现一些需要initState和dispose的逻辑。

@override
Widget build(BuildContext context, WidgetRef ref) {
  // 初始化一个变量,并且只会执行一次
  final count = useState<T>(initValue);
  // 改变变量的值,并且会刷新widget,相当于setState
  count.value++;

  useEffect({
    // 做一些initState的操作
    // 这里的执行只有Widget第一次build的时候才会执行
    return method.call();// 这个方法在widget dispose的时候会执行。
  })

  // 一条语句可以实现animationController的初始化和自动dispose
  final animationCtrl =
        useAnimationController(duration: 300.milliseconds, initialValue: 0);
}

更多Hook用法参考:Hook的用法

4. HookConsumer

HookConsumer就是对HookConsumerWidget的进一步封装,对于一些不需要新建一个类去继承HookConsumerWidget的,那就直接用HookConsumer。就如同Consumer和ConsumerWidget之间的关系一样。

5. RiverpodConsumer

是内部自己实现的一个HookConsumer,传入listenable和builder可以实现provider的监听和rebuild。对于只需要监听单一变量时,使用RiverpodConsumer是比较方便的,但是如果一个widget需要监听多个变量,对这些变量做出对应的widget更新,那是不建议使用RiverpodConsumer进行多层嵌套的。因为RiverpodConsumer实际内部还是用Consumer实现的,而Consumer实际是一个StatefulWidget,所以RiverpodConsumer的嵌套实际上就是StatefulWidget的嵌套,这个是损耗性能并且是没必要的操作。还降低了代码的可读性。

6. WidgetRef的监听

WidgetRef中一共有4种调用provider的方式,分别是read, listen, watch和refresh,其中前3种比较常见和易用。read是获取provider的当前状态,如果后续provider发生改变了,那么获得的值并不会更新。并且,当provider是AutoDispose的,那么在read完这个provider之后,provider就会被dispose,即使当前页面没有销毁,provider也同样会被dispose。
而listen和watch是可以监听provider的变化。他们的区别是,listen是监听provider的变化,然后在回调函数中做对应的逻辑处理。而watch是监听provider的变化,然后让·ref对应的widget自动重建。
所以,当我们使用watch的时候应该尽可能的让底层的ref去做监听,来避免大量widget的重建。并且监听的时候尽量使用provider.select((value) => value.member)监听provider中的某个变量的变化。来避免provider其他不相关的变量发生变化引起不必要的重建。
另外,当我们监听provider中的集合时,如果是集合中的元素发生变化(增删改),通过provider.select((value) => value.collection)是没办法监听到的,此时只能ref.watch(provider)监听整个provider来获取集合元素的变化。除非是在集合元素发生变化后,重新对集合进行赋值,那就可以监听select
对provider中的对象同理。如果是修改对象的某个成员变量,只监听该对象是无法获得该对象的某个成员变量的变化。需要监听该对象的成员变量。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,165评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,503评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,295评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,589评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,439评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,342评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,749评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,397评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,700评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,740评论 2 313
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,523评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,364评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,755评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,024评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,297评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,721评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,918评论 2 336

推荐阅读更多精彩内容