监听生命周期的方法


我们在上一章回中介绍了"显示Snackbar的另外一种方法"相关的内容,本章回中将介绍如何监听组件的生命周期.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在第八十二回中介绍过Widget的生命周期,主要介绍了生命周期的概念以及生命周期的回调方法,不这我们介绍的生命周期回调方法都是组件自带的方法,我们在本
章回中将介绍其它的生命周期方法,这些生命周期方法不是组件自带的,它们具体是什么呢?让我们一起去看看吧。

2. 生命周期及其方法

2.1 生命周期

我们在本章回介绍的生命周期和之前博客中介绍的类似,不过生命周期的状态稍微有点不同,这些状态主要来自widgestOvserver这个抽象类,它提供了相关的状态来
表示组件的生命周期,详细如下:

  • AppLifecycleState.resumed: 当组件重新运行时可以监听到此状态;
  • AppLifecycleState.inactive: 当组件可见时可以监听到此状态;
  • AppLifecycleState.paused: 当组件不可见时可以监听到此状态;
  • AppLifecycleState.detached: 当组件销毁时可以监听到此状态;

2.2 回调方法

介绍完组件的生命周期后,我们接着介绍与生命周期相对应的生命周期方法,这些方法也是来自widgestOvserver这个抽象类:

  • didPopRoute()
  • didPushRoute()
  • didChangeMetrics()
  • didChangePlatformBrightness()
  • didChangeLocales()
  • didChangeAppLifecycleState()
  • didHaveMemoryPressure()
    这些回调方法主要用来监听不同的功能,这个从方法的名称中就可以看出来,如果我们只想监听组件的生命周期,那么只需要重写didChangeAppLifecycleState()
    方法就可以,该方法包含一个AppLifecycleState类型的参数,从参数中可以获取组件在生命周期中的状态,也就是我们在上一小节中介绍的状态。

2.3 使用方法

接下来我们介绍如何监听组件的生命周期,下面是详细的实现步骤:

  • 把需要被监听的组件类组合(minxin)widgestOvserver抽象类;
  • 在被监听组件的initState()方法中注册监听器,在disPose()方法中销毁监听器;
  • 在组件类中重写组合类中的方法,在重写方法时可以监听各种系统事件;
    我们在这里只通过文本来是介绍,在接下来的小节中将通过具体的示例代码来演示。此外,上面步骤中提到的被监听的组件只能是MaterialApp的子组件,其它组件无法
    监听到生命周期的状态,或者说不会回调生命周期方法。这点需要特别注意一下。

3. 示例代码

///WidgetsBindingObserver只有放到MaterialApp的子组件下可以监听到消息,放在其它widget中无法监听到消息
class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver{
  ///注意:需要在initState中注册监听器并且在disPose中销毁监听器
  
  void didChangeAppLifecycleState(AppLifecycleState state) {
    debugPrint(" app state: $state");
    super.didChangeAppLifecycleState(state);
  }

  
  Widget build(BuildContext context) {}

  
  void initState() {
    super.initState();
    debugPrint('HomePage initState');
    WidgetsBinding.instance.addObserver(this);
  }

  
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
    debugPrint('HomePage dispose');
  }
}

在示例代码中我们重写了didChangeAppLifecycleState()这个回调方法,build方法中的内容省略不写,此外,_MyHomePageState这个类是MaterialApp组件
的子组件,只是我们在代码中省略了MaterialApp组件。编译并且运行上面的程序,同时把整个App切换到后台,可以得到下面运行结果:
I/flutter (13892): app state: AppLifecycleState.inactive
I/flutter (13892): app state: AppLifecycleState.paused
I/flutter (13892): app state: AppLifecycleState.detached
从上面的运行结果中可以看到组件生命周期的状态,不过启动时的日志(onResume)看不到,只有结束时的日志才能被看到。

4. 内容总结

最后, 我们对章回的内容做一个全面的总结:

  • 我们可以组合widgestOvserver类,进而监听组件的生命周期;
  • 在widgestOvserver中包含了多个回调方法,除了可以监听组件的生命周期外还可以监听其它的系统事件;
  • 我们介绍的widgestOvserver类主要用来监听整个App可以响应的事件,而不是单个页面响应的事件;
    最后,我们再次强调一下:widgestOvserver必须用在MaterialApp的home属性对应的Widget上,也就是MaterialApp的子组件。该类放在其它Widget上不起作
    用。因此我们主要通过该类来监听整个App的生命周期以及其它的系统事件,而不是单个页面的生命周期事件。
    看官们,与"如何监听组件的生命周期"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
  • 20
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
回答: 在React中,可以使用生命周期函数来监听组件的生命周期事件。其中,componentWillReceiveProps是一个常用的生命周期函数之一,它会在组件接收到新的props时被调用。在React 16.3之前,componentWillReceiveProps是在不进行额外渲染的前提下,响应props中的改变并更新state的唯一方式。\[1\]然而,在函数式组件中,没有生命周期函数。相反,可以使用useState和useEffect来实现类似的功能。useState用于定义和更新组件的状态,而useEffect则用于在组件更新后执行一些操作,比如操作DOM或进行网络请求。在useEffect中,可以通过比较当前props和之前的props来确定是否需要进行网络请求等操作。\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [React基础:监听](https://blog.csdn.net/weixin_41897680/article/details/119104598)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [React 在哪个生命周期监听props变化发请求](https://blog.csdn.net/lsk222/article/details/123552740)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值