所以,我对Riverpod相当陌生,我使用Riverpod主要是因为较少的页面重建,但是当我使用ConsumerWidget时,我应该什么时候使用ConsumerWidget,因为我看到当我使用ConsumerWidget时,它重建了整个小部件树,但是当只在该按钮上使用Consumer时,它只重建了按钮的状态,而不是整个页面。那么,什么时候应该使用ConsumerWidget和Consumer?
oyjwcjzk1#
通常ConsumerWidget用于页面/UI组件。例如:
ConsumerWidget
class SomePage extends ConsumerWidget{ @override Widget build(BuildContext context, WidgetRef ref){ SomeValue value = ref.watch(someProvider); return SomeWidget(value); }
另一方面,Consumer用于在本地监视提供程序值。例如:
Consumer
class SomeOtherPage extends StatelessWidget{ @override Widget build(BuildContext context){ return Column( children:[ Text('Consumer'), Consumer( builder: (context, ref, child) { final value = ref.watch(someOtherProvider); return Text(value); }, ), ], ); }
当您需要更新小部件树的一小部分时,建议使用Consumer,因为重新呈现整个树的成本很高。
58wvjzkj2#
这是个选择的问题。您可以在任何地方使用Consumer,或者使用ConsumerWidget。建议通常使用ConsumerWidget,因为:
例如,您可以执行以下操作:
class SomeOtherPage extends ConsumerWidget { const SomeOtherPage({required this.label, super.key}); final String label; @override Widget build(BuildContext context, WidgetRef ref){ return Column( children:[ Text(label), const MyText(); ], ); } } class MyTest extends ConsumerWidget { const MyTest({super.key}); @override Widget build(BuildContext context, WidgetRef ref){ final value = ref.watch(myProvider); return Text(value); } }
在这种情况下,如果SomeOtherPage.label更改,MyTest将正确地不重建,而是仅在myProvider更改时重建。
SomeOtherPage.label
MyTest
myProvider
2条答案
按热度按时间oyjwcjzk1#
通常
ConsumerWidget
用于页面/UI组件。例如:另一方面,
Consumer
用于在本地监视提供程序值。例如:当您需要更新小部件树的一小部分时,建议使用
Consumer
,因为重新呈现整个树的成本很高。58wvjzkj2#
这是个选择的问题。您可以在任何地方使用Consumer,或者使用ConsumerWidget。
建议通常使用ConsumerWidget,因为:
例如,您可以执行以下操作:
在这种情况下,如果
SomeOtherPage.label
更改,MyTest
将正确地不重建,而是仅在myProvider
更改时重建。