用flutter_hooks进行不必要的重建

问题描述

我正在尝试同时使用StateNotifier，Provider，flutter_hooks和functional_widget。

我在小部件层次结构中看到了重建，我不希望它们发生。我在下面设置了一个简单的用例。

我的集团有一个方法updateName()，其定义为

  void updateName() {
    var name = this.state.userName + "X";
    updateState(this.state.copyWith(userName: name));
  }

作为测试，当按下MenuItems之一或用户点击Update Name按钮时，我将调用此方法。我的期望是，当按下updateName()并更新StateNotifiers state时，将仅调用userAccountHeader构建函数，因为它是唯一通过以下方式监听名称的函数：

var name = useStateValue(bloc,(MenuState s) => s.userName);

但是，从我的日志中，我可以看到该树中的所有小部件都在重建中。

flutter: menuList.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: menuListItem.build
flutter: userAccountHeader.build

import 'package:apptree_client/components/menu/menu_bloc.dart';
import 'package:apptree_client/hooks/hooks.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:functional_widget_annotation/functional_widget_annotation.dart';

import 'menu_item_view.dart';
part 'menu.g.dart';

@hwidget
Widget menuDrawer(BuildContext context) {
  var bloc = useMenuBloc();
  return Drawer(child: menuList(context,bloc));
}

@hwidget
Widget userAccountHeader(BuildContext context,MenuBloc bloc) {
  var name = useStateValue(bloc,(MenuState s) => s.userName);

  print("userAccountHeader.build");
  return DrawerHeader(
    child: Column(
      children: [
        Text(name),MaterialButton(
          onPressed: () => bloc.updateName(),child: Text("Update name"),)
      ],),decoration: BoxDecoration(
      color: Colors.blue,);
}

@hwidget
Widget menuList(BuildContext context,MenuBloc bloc) {
  var menuItems = useStateValue(bloc,(MenuState s) => s.menuItems);
  print("menuList.build");
  var menuItemsWidgets =
      menuItems.map((item) => menuListItem(context,item,bloc)).toList();

  return ListView(children: [
    userAccountHeader(context,bloc),...menuItemsWidgets,]);
}

@hwidget
Widget menuListItem(BuildContext context,MenuItemView view,MenuBloc bloc) {
  print("menuListItem.build");
  return ListTile(
    title: Text(view.title),onTap: () => bloc.updateName(),);
}

MenuBloc useMenuBloc() {
  final context = useContext();

  return useMemoized(
        () => MenuBloc(
      config: Provider.of(context,listen: false),appSettings: Provider.of(context,);
}

R useStateValue<T,R>(StateNotifier<T> notifier,R selector(T value)) {
  // ignore: invalid_use_of_protected_member
  final state = useState<R>(selector(notifier.state));
  useEffect(() {
    return notifier.addListener((s) {
      var newVal = selector(s);
      if (!const DeepCollectionEquality().equals(newVal,state.value)) {
        state.value = newVal;
      }
    });
  },[notifier]);
  return state.value;
}

解决方法

您正在直接使用functional_widget函数，而不是使用生成的窗口小部件。 因此，不是每个小部件都有各自的上下文并能够分别重建，而是创建了一个大的小部件，就像仅对部分小部件使用函数而不是小部件类那样。

要解决此问题，请使所有小部件功能调用都以大写字母开头，改为使用生成的小部件