Flutter 颤振-将StatefulWidget转换为带有一次性bloc的HookWidget

我在几周前读到了这篇文章，现在想在我的新项目中实现它。我所说的“基本”小部件是一个有状态的小部件，它具有mixin

RouteAware

的特性，这是一些项目原因造成的。此外，每一个都有一个集团，提供

行为主题

。bloc必须由Widget处理，这就是为什么

RouteAware

是一个

StatefulWidget

的原因。这里我没有太多的细节，但是这个bloc是用许多依赖项构建的，并且像这个MyWidget一样传递（bloc://resolve bloc here）

有人能帮我把它转换成

HookWidget

，以及如何添加

useAware

Hook吗

class MyBloc{

 void dispose(){}

 void didPopNext(){}

 void didPush(){}


}

class MyWidget extends StatefulWidget{

  final MyBloc bloc;

  MyWidget({key, this.bloc}) : super(key: key);

  @override
  MyWidgetState createState() => MyWidgetState();


}


class MyWidgetState extends State<MyWidget> with RouteAware{

@override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context));
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    widget.bloc.dispose();
    super.dispose();
  }

  @override
  void didPush() {
    // Route was pushed onto navigator and is now topmost route.
    widget.bloc.didPush();
  }

  @override
  void didPopNext() {
    // Covering route was popped off the navigator.
    widget.bloc.didPopNext();
  }

  @override
  Widget build(BuildContext context) => StreamBuilder(stream: widget.bloc.myStream, initialValue: widget.bloc.myStream.value, builder: (context, snapshot){

//work with snapshot

});

} 

class MyBloc{
void dispose（）{}
void didPopNext（）{}
void didPush（）{}
}
类MyWidget扩展了StatefulWidget{
最后的MyBloc bloc；
MyWidget（{key，this.bloc}）：超级（key:key）；
@凌驾
MyWidgetState createState（）=>MyWidgetState（）；
}
类MyWidgetState使用RouteAware扩展状态{
@凌驾
void didChangeDependencies（）{
super.didChangeDependencies（）；
subscribe（这是（上下文）的ModalRoute.of）；
}
@凌驾
无效处置（）{
routeObserver.unsubscribe（此）；
widget.bloc.dispose（）；
super.dispose（）；
}
@凌驾
void didPush（）{
//路线被推到了导航器上，现在是最上面的路线。
widget.bloc.didPush（）；
}
@凌驾
void didPopNext（）{
//覆盖路线从导航器上弹出。
widget.bloc.didPopNext（）；
}
@凌驾
Widget build（BuildContext context）=>StreamBuilder（流：Widget.bloc.myStream，初始值：Widget.bloc.myStream.value，builder:（上下文，快照）{
//使用快照
});
} 

要使用hook调用dispose方法，可以使用

useffect

hook，其中函数的返回是您要用于dispose的方法

useEffect((){   
   return bloc.dispose
}, const [])