英文:
when to use ConsumerWidget and consumer?
问题
当我使用ConsumerWidget时，整个小部件树都会重建，但当只在该按钮上使用consumer时，它仅重新构建按钮的状态，所以我应该在什么情况下使用ConsumerWidget和Consumer？
英文:
So, I am fairly new to Riverpod and I use Riverpod mainly because of less page rebuild but when should I use ConsumerWidget as I saw when I use ConsumerWidget it rebuilds the whole widget tree but when using only consumer on that button that it only rebuilds the button's state not whole page.
so, when should I use ConsumerWidget and Consumer?
答案1
得分: 5
通常用于页面/ UI 组件的是 ConsumerWidget。
例如：
class SomePage extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
SomeValue value = ref.watch(someProvider);
return SomeWidget(value);
}
另一方面，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，其中重新渲染整个树的成本较高。
英文:
Usually ConsumerWidget is used for pages/UI components.
For example:
class SomePage extends ConsumerWidget{
@override
Widget build(BuildContext context, WidgetRef ref){
SomeValue value = ref.watch(someProvider);
return SomeWidget(value);
}
On the other hand Consumer is used to watch the provider values locally.
For example:
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);
},
),
],
);
}
It's recommended to use Consumer when you need to update a little chunk of your widget tree where re-rendering the whole tree is costly.
答案2
得分: 4
这是一个选择的问题。你可以在任何地方使用 Consumer，或者使用 ConsumerWidget。
推荐通常使用 ConsumerWidget，原因如下：
- 它们可以有一个常量构造函数，因此比 Consumers 允许更多的性能优化。
- 它们鼓励将大型组件拆分成较小的块。
例如，你可以这样做：
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 发生变化时才会重新构建。
英文:
It's a matter of choice. You could use Consumer everywhere, or ConsumerWidget instead.
The recommendation is to generally use ConsumerWidget, for the fact that:
- They can have a const constructor, so enable more performance optimizations than Consumers.
- They promote splitting large components into smaller chunks
For example you could do:
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);
}
}
In that scenario, if SomeOtherPage.label changes, MyTest will correctly not rebuild and instead only rebuild if myProvider changes.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论