反应生命周期
本指南讨论了如何在离子反应应用中使用离子生命周期事件。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
- 当此事件启动时,您就会知道新页面已经完全过渡,因此,当视图可见时,您通常不会执行任何逻辑。