搜索文档 /

反应生命周期

本指南讨论了如何在离子反应应用中使用离子生命周期事件。betway东盟体育app

betway东盟体育app离子生命周期方法

betway东盟体育app离子提供了一些可以在应用程序中使用的生命周期方法:

事件名称 描述
Ionviewwillenter 当组件路由即将动画视图时,被触发。
IonviewDidenter 当组件路由完成动画时,被解雇。
IonviewWillleave 当组件路由即将到达动画时,被解雇。
IonviewDidleave 当组件路由完成动画时,被解雇。

如果您使用基于类的组件或功能组件,则访问这些方法的方式会根据您的方式而变化。我们介绍下面的两种方法。

基于类的组件中的生命周期方法

要在基于类的组件中使用betway东盟体育app离子生命周期方法,必须将组件包裹 WETINLIFECYCLE 高阶组件(HOC)喜欢:


              出口
             
              默认
             
              WETINLIFECYCLE
              ((
             主页
              
              ;
复制 复制

WETINLIFECYCLE 是从中导入的 @betway东盟体育appionic/react

然后,您可以在类组件上创建适当的生命周期方法,并在事件发生时调用该方法。以下是实现每种生命周期方法的整个组件:


              进口
             反应
              
             
              “反应”
              ;
             
              进口
             
              {
             离子
              ,,,,
             离子页
              ,,,,
             Iontoolbar
              ,,,,
             离子
              ,,,,
             离子体
              ,,,,
             WETINLIFECYCLE
              }
             
              
             
              '@betway东盟体育appionic/react'
              ;
             
              班级
             
              主页
             
              扩展
             
              反应
               
              零件
             
              {
             
              Ionviewwillenter
              ((
              
             
              {
             
              安慰
              
              日志
              ((
              'Ionviewwillenter事件被解雇了'
              
             
              }
             
              IonviewWillleave
              ((
              
             
              {
             
              安慰
              
              日志
              ((
              “ IonviewWillleave事件被解雇”
              
             
              }
             
              IonviewDidenter
              ((
              
             
              {
             
              安慰
              
              日志
              ((
              'IonviewDidenter事件被解雇了'
              
             
              }
             
              IonviewDidleave
              ((
              
             
              {
             
              安慰
              
              日志
              ((
              'IonviewDidleave事件被解雇了'
              
             
              }
             
              使成为
              ((
              
             
              {
             
              返回
             
              ((
             
              <
             离子页
              >
             
              <
             离子
              >
             
              <
             Iontoolbar
              >
             
              <
             离子
              >
             
              <
              /
             离子
              >
             
              <
              /
             Iontoolbar
              >
             
              <
              /
             离子
              >
             
              <
             离子体
              >
              <
              /
             离子体
              >
             
              <
              /
             离子页
              >
             
              
              ;
             
              }
             
              }
             
              出口
             
              默认
             
              WETINLIFECYCLE
              ((
             主页
              
              ;
复制 复制

功能组件中的生命周期方法

betway东盟体育app您可以在功能组件中使用的每种生命周期方法的离子反应导出钩子。每个钩子都采用事件发射时要调用的方法。


              进口
             
              {
             离子体
              ,,,,
             离子
              ,,,,
             离子
              ,,,,
             Iontoolbar
              ,,,,
             useionviewDidenter
              ,,,,
             useionViewDidleave
              ,,,,
             useionviewwillenter
              ,,,,
             useionviewwillleave
              }
             
              
             
              '@betway东盟体育appionic/react'
              ;
             
              进口
             反应
              
             
              “反应”
              ;
             
              const
             主页
              
             反应
              
              FC
             
              =
             
              ((
              
             
              =>
             
              {
             
              useionviewDidenter
              ((
              ((
              
             
              =>
             
              {
             
              安慰
              
              日志
              ((
              'IonviewDidenter事件被解雇了'
              
              ;
             
              }
              
              ;
             
              useionViewDidleave
              ((
              ((
              
             
              =>
             
              {
             
              安慰
              
              日志
              ((
              'IonviewDidleave事件被解雇了'
              
              ;
             
              }
              
              ;
             
              useionviewwillenter
              ((
              ((
              
             
              =>
             
              {
             
              安慰
              
              日志
              ((
              'Ionviewwillenter事件被解雇了'
              
              ;
             
              }
              
              ;
             
              useionviewwillleave
              ((
              ((
              
             
              =>
             
              {
             
              安慰
              
              日志
              ((
              “ IonviewWillleave事件被解雇”
              
              ;
             
              }
              
              ;
             
              返回
             
              ((
             
              <
             离子页
              >
             
              <
             离子
              >
             
              <
             Iontoolbar
              >
             
              <
             离子
              >
             
              <
              /
             离子
              >
             
              <
              /
             Iontoolbar
              >
             
              <
              /
             离子
              >
             
              <
             离子体
              >
              <
              /
             离子体
              >
             
              <
              /
             离子页
              >
             
              
              ;
             
              }
              ;
             
              出口
             
              默认
             主页
              ;
复制 复制

注意:功能组件不需要包装 WETINLIFECYCLE 作为类组件做的事。

反应生命周期方法

React中的所有生命周期方法( componentDidmount ,,,, 组件Willunmount ,等等)也可以使用。但是,由于离子反应管理页面的寿betway东盟体育app命,因此某些事件可能不会在您期望的情况下开火。例如, componentDidmount 第一次显示页面时启动,但是如果您远离页面,ionic可能会将页面保留在DOM中,随后访问该页面可能无法打电话betway东盟体育app componentDidmount 再次。这种情况是存在离子生命​​周期方法的主要原因,当视图输入和退出时,当天然框betway东盟体育app架的事件可能无法触发时,仍可以为您提供一种调用逻辑的方法。

每个生命周期方法的指导

以下是有关每个生命周期事件使用案例的一些技巧。

  • Ionviewwillenter - 自从 Ionviewwillenter 每次将视图导航到(无论是否初始化)时,都会称呼它,这是从服务加载数据的好方法。
  • IonviewDidenter - 如果您看到使用的性能问题 Ionviewwillenter 加载数据时,您可以进行数据调用 IonviewDidenter 反而。但是,在用户可以看到页面后,此事件才会发射,因此您可能需要使用加载指示器或骨架屏幕,因此在过渡完成后,内容不会在非自然的情况下闪烁。
  • IonviewWillleave - 可用于清理,例如从数据源取消订阅。自从 组件Willunmount 从当前页面导航时可能不会发射,如果您不希望它在屏幕不在查看时,请将清理代码放在此处。
  • IonviewDidleave - 当此事件启动时,您就会知道新页面已经完全过渡,因此,当视图可见时,您通常不会执行任何逻辑。
以前的
您的第一个应用程序
下一个
导航
Baidu