反应生命周期/h1>
本指南讨论了如何在离子反应应用中使用离子生命周期事件。betway东盟体育app/p>
betway东盟体育app离子生命周期方法/a>
betway东盟体育app离子提供了一些可以在您的应用中使用的生命周期方法:/p>
事件名称/th>
描述/th>
IonViewWillenter/code>
当组件路由即将设置为View时触发。/td>
IonviewDienter./code>
组件路由已完成动画时触发。/td>
IonviewWillleave./code>
当组件路由即将设置动画时触发。/td>
IonviewDidleave./code>
组件路由已完成动画时触发。/td>
访问这些方法的方式是根据您使用基于类的组件或功能组件的方式而变化。我们涵盖以下两种方法。/p>
基于类组件的生命周期方法/a>
要在基于类的组件中使用betway东盟体育app离子生命周期方法,必须将组件包装在一起code c-id="168.88.5.1">
含量增生/code>
更高阶组件(HOC)如:/p>
出口/span>
默认/span>
含量增生/span>
(/span>
主页span class="token punctuation" c-id="168.107.7.7">
的)/span>
;/span>
含量增生/code>
从中进口code c-id="168.119.6.2">
@betway东盟体育app离子/反应/code>
然后,您可以在类组件上创建适当的生命周期方法,并且在事件发生时,HOC调用该方法。下面是整个组件,其中每个生命周期方法都有:/p>
进口/span>
反应span class="token keyword" c-id="168.133.7.2">
从/span>
'反应'/span>
;/span>
进口/span>
{/span>
离子主艇span class="token punctuation" c-id="168.147.7.11">
那/span>
离子页面span class="token punctuation" c-id="168.150.7.13">
那/span>
Iontoolbar.span class="token punctuation" c-id="168.153.7.15">
那/span>
Iontitle.span class="token punctuation" c-id="168.156.7.17">
那/span>
离子联系span class="token punctuation" c-id="168.159.7.19">
那/span>
含量增生span class="token punctuation" c-id="168.162.7.21">
}/span>
从/span>
'@betway东盟体育app离子/反应'/span>
;/span>
班级/span>
主页/span>
延伸/span>
反应span class="token punctuation" c-id="168.184.8.1">
。/span>
零件/span>
{/span>
IonViewWillenter/span>
(/span>
的)/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewwillenterer活动发射'/span>
的)/span>
}/span>
IonviewWillleave./span>
(/span>
的)/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewwillleave活动发射'/span>
的)/span>
}/span>
IonviewDienter./span>
(/span>
的)/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewdidenter活动触发'/span>
的)/span>
}/span>
IonviewDidleave./span>
(/span>
的)/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewdidleave活动发射'/span>
的)/span>
}/span>
使成为/span>
(/span>
的)/span>
{/span>
返回/span>
(/span>
/span>
离子页面span class="token operator" c-id="168.314.7.110">
>/span>
/span>
离子主艇span class="token operator" c-id="168.320.7.114">
>/span>
/span>
Iontoolbar.span class="token operator" c-id="168.326.7.118">
>/span>
/span>
Iontitle.span class="token operator" c-id="168.332.7.122">
>/span>
家span class="token operator" c-id="168.335.7.124">
/span>
//span>
Iontitle.span class="token operator" c-id="168.340.7.127">
>/span>
/span>
//span>
Iontoolbar.span class="token operator" c-id="168.348.7.132">
>/span>
/span>
//span>
离子主艇span class="token operator" c-id="168.356.7.137">
>/span>
/span>
离子联系span class="token operator" c-id="168.362.7.141">
>/span>
/span>
//span>
离子联系span class="token operator" c-id="168.369.7.145">
>/span>
/span>
//span>
离子页面span class="token operator" c-id="168.377.7.150">
>/span>
的)/span>
;/span>
}/span>
}/span>
出口/span>
默认/span>
含量增生/span>
(/span>
主页span class="token punctuation" c-id="168.402.7.166">
的)/span>
;/span>
功能组件中的生命周期方法/a>
betway东盟体育app离子反应为每个可以在功能组件中使用的生命周期方法出口挂钩。每个钩子都采用您想要在事件触发时调用的方法。/p>
进口/span>
{/span>
离子联系span class="token punctuation" c-id="168.427.7.4">
那/span>
离子主艇span class="token punctuation" c-id="168.430.7.6">
那/span>
Iontitle.span class="token punctuation" c-id="168.433.7.8">
那/span>
Iontoolbar.span class="token punctuation" c-id="168.436.7.10">
那/span>
umeryionviewdidenter.span class="token punctuation" c-id="168.439.7.12">
那/span>
使用ViewDididleave.span class="token punctuation" c-id="168.442.7.14">
那/span>
使用viewwillenter.span class="token punctuation" c-id="168.445.7.16">
那/span>
使用viewwillleave.span class="token punctuation" c-id="168.448.7.18">
}/span>
从/span>
'@betway东盟体育app离子/反应'/span>
;/span>
进口/span>
反应span class="token keyword" c-id="168.462.7.27">
从/span>
'反应'/span>
;/span>
Const./span>
主页span class="token operator" c-id="168.473.7.34">
:/span>
反应span class="token punctuation" c-id="168.476.7.36">
。/span>
FC./span>
=/span>
(/span>
的)/span>
=>/span>
{/span>
umeryionviewdidenter./span>
(/span>
(/span>
的)/span>
=>/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewdidenter活动触发'/span>
的)/span>
;/span>
}/span>
的)/span>
;/span>
使用ViewDididleave./span>
(/span>
(/span>
的)/span>
=>/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewdidleave活动发射'/span>
的)/span>
;/span>
}/span>
的)/span>
;/span>
使用viewwillenter./span>
(/span>
(/span>
的)/span>
=>/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewwillenterer活动发射'/span>
的)/span>
;/span>
}/span>
的)/span>
;/span>
使用viewwillleave./span>
(/span>
(/span>
的)/span>
=>/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewwillleave活动发射'/span>
的)/span>
;/span>
}/span>
的)/span>
;/span>
返回/span>
(/span>
/span>
离子页面span class="token operator" c-id="168.652.7.138">
>/span>
/span>
离子主艇span class="token operator" c-id="168.658.7.142">
>/span>
/span>
Iontoolbar.span class="token operator" c-id="168.664.7.146">
>/span>
/span>
Iontitle.span class="token operator" c-id="168.670.7.150">
>/span>
家span class="token operator" c-id="168.673.7.152">
/span>
//span>
Iontitle.span class="token operator" c-id="168.678.7.155">
>/span>
/span>
//span>
Iontoolbar.span class="token operator" c-id="168.686.7.160">
>/span>
/span>
//span>
离子主艇span class="token operator" c-id="168.694.7.165">
>/span>
/span>
离子联系span class="token operator" c-id="168.700.7.169">
>/span>
/span>
//span>
离子联系span class="token operator" c-id="168.707.7.173">
>/span>
/span>
//span>
离子页面span class="token operator" c-id="168.715.7.178">
>/span>
的)/span>
;/span>
}/span>
;/span>
出口/span>
默认/span>
主页span class="token punctuation" c-id="168.734.7.190">
;/span>
注意:功能组件不需要包裹code c-id="168.742.6.1">
含量增生/code>
作为类组件的HOC。/p>
反应生命周期方法/a>
反应中的所有生命周期方法(code c-id="168.755.5.1">
ComponentDidMount./code>
那code c-id="168.758.5.3">
componentwillunmount./code>
等等..)也可供您使用。然而,由于离子反应管理页面的寿betway东盟体育app命,因此某些事件可能在您期望的时候可能不会着火。例如,code c-id="168.761.5.5">
ComponentDidMount./code>
第一次显示页面时发出触发,但如果您远离页面IONIC可能会在DOM中保持页面,并且随后访问页面可能无法调用betway东盟体育appcode c-id="168.764.5.7">
ComponentDidMount./code>
再次。这种情况是离子生命周期方法存在的主要原因,仍然可以在当地框架的事件可能无法betway东盟体育app触发时向您提供呼叫逻辑的方法。/p>
每个生命周期方法的指导/a>
以下是每个生命周期事件的使用案例的一些提示。/p>
IonViewWillenter/code>
- 自从code c-id="168.783.6.2">
IonViewWillenter/code>
每次导航到(无论初始化是否初始化)时,都会调用,这是从服务中加载数据的好方法。/li>
IonviewDienter./code>
- 如果您看到使用性能问题code c-id="168.791.6.2">
IonViewWillenter/code>
加载数据时,您可以执行数据code c-id="168.794.6.4">
IonviewDienter./code>
反而。然而,此事件直到用户对用户可见后,此事件将无法触发,因此您可能希望使用加载指示灯或骨架屏幕,因此在转换完成后内容不会自然闪烁。/li>
IonviewWillleave./code>
- 可以用于清理,如取消订阅数据源。自从code c-id="168.802.6.2">
componentwillunmount./code>
从当前页面导航时可能不会启动,如果在屏幕未视图中不希望它处于活动状态,请在此处放置您的清理代码。/li>
IonviewDidleave./code>
- 当此事件触发时,您知道新页面已完全转换,因此在视图可见时,您可能通常可能无法执行的任何逻辑。/li>
以前的/div>
你的第一个应用程序/span>
下一个/div>
导航/span>
本指南讨论了如何在离子反应应用中使用离子生命周期事件。betway东盟体育app/p>
betway东盟体育app离子生命周期方法/a>
betway东盟体育app离子提供了一些可以在您的应用中使用的生命周期方法:/p>
事件名称/th> | 描述/th> |
---|---|
IonViewWillenter/code> |
当组件路由即将设置为View时触发。/td> |
IonviewDienter./code> |
组件路由已完成动画时触发。/td> |
IonviewWillleave./code> |
当组件路由即将设置动画时触发。/td> |
IonviewDidleave./code> |
组件路由已完成动画时触发。/td> |
访问这些方法的方式是根据您使用基于类的组件或功能组件的方式而变化。我们涵盖以下两种方法。/p>
基于类组件的生命周期方法/a>
要在基于类的组件中使用betway东盟体育app离子生命周期方法,必须将组件包装在一起code c-id="168.88.5.1">
含量增生/code>
更高阶组件(HOC)如:/p>
出口/span>
默认/span>
含量增生/span>
(/span>
主页span class="token punctuation" c-id="168.107.7.7">
的)/span>
;/span>
含量增生/code> 从中进口code c-id="168.119.6.2"> @betway东盟体育app离子/反应/code>
然后,您可以在类组件上创建适当的生命周期方法,并且在事件发生时,HOC调用该方法。下面是整个组件,其中每个生命周期方法都有:/p>
进口/span>
反应span class="token keyword" c-id="168.133.7.2">
从/span>
'反应'/span>
;/span>
进口/span>
{/span>
离子主艇span class="token punctuation" c-id="168.147.7.11">
那/span>
离子页面span class="token punctuation" c-id="168.150.7.13">
那/span>
Iontoolbar.span class="token punctuation" c-id="168.153.7.15">
那/span>
Iontitle.span class="token punctuation" c-id="168.156.7.17">
那/span>
离子联系span class="token punctuation" c-id="168.159.7.19">
那/span>
含量增生span class="token punctuation" c-id="168.162.7.21">
}/span>
从/span>
'@betway东盟体育app离子/反应'/span>
;/span>
班级/span>
主页/span>
延伸/span>
反应span class="token punctuation" c-id="168.184.8.1">
。/span>
零件/span>
{/span>
IonViewWillenter/span>
(/span>
的)/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewwillenterer活动发射'/span>
的)/span>
}/span>
IonviewWillleave./span>
(/span>
的)/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewwillleave活动发射'/span>
的)/span>
}/span>
IonviewDienter./span>
(/span>
的)/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewdidenter活动触发'/span>
的)/span>
}/span>
IonviewDidleave./span>
(/span>
的)/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewdidleave活动发射'/span>
的)/span>
}/span>
使成为/span>
(/span>
的)/span>
{/span>
返回/span>
(/span>
/span>
离子页面span class="token operator" c-id="168.314.7.110">
>/span>
/span>
离子主艇span class="token operator" c-id="168.320.7.114">
>/span>
/span>
Iontoolbar.span class="token operator" c-id="168.326.7.118">
>/span>
/span>
Iontitle.span class="token operator" c-id="168.332.7.122">
>/span>
家span class="token operator" c-id="168.335.7.124">
/span>
//span>
Iontitle.span class="token operator" c-id="168.340.7.127">
>/span>
/span>
//span>
Iontoolbar.span class="token operator" c-id="168.348.7.132">
>/span>
/span>
//span>
离子主艇span class="token operator" c-id="168.356.7.137">
>/span>
/span>
离子联系span class="token operator" c-id="168.362.7.141">
>/span>
/span>
//span>
离子联系span class="token operator" c-id="168.369.7.145">
>/span>
/span>
//span>
离子页面span class="token operator" c-id="168.377.7.150">
>/span>
的)/span>
;/span>
}/span>
}/span>
出口/span>
默认/span>
含量增生/span>
(/span>
主页span class="token punctuation" c-id="168.402.7.166">
的)/span>
;/span>
功能组件中的生命周期方法/a>
betway东盟体育app离子反应为每个可以在功能组件中使用的生命周期方法出口挂钩。每个钩子都采用您想要在事件触发时调用的方法。/p>
进口/span>
{/span>
离子联系span class="token punctuation" c-id="168.427.7.4">
那/span>
离子主艇span class="token punctuation" c-id="168.430.7.6">
那/span>
Iontitle.span class="token punctuation" c-id="168.433.7.8">
那/span>
Iontoolbar.span class="token punctuation" c-id="168.436.7.10">
那/span>
umeryionviewdidenter.span class="token punctuation" c-id="168.439.7.12">
那/span>
使用ViewDididleave.span class="token punctuation" c-id="168.442.7.14">
那/span>
使用viewwillenter.span class="token punctuation" c-id="168.445.7.16">
那/span>
使用viewwillleave.span class="token punctuation" c-id="168.448.7.18">
}/span>
从/span>
'@betway东盟体育app离子/反应'/span>
;/span>
进口/span>
反应span class="token keyword" c-id="168.462.7.27">
从/span>
'反应'/span>
;/span>
Const./span>
主页span class="token operator" c-id="168.473.7.34">
:/span>
反应span class="token punctuation" c-id="168.476.7.36">
。/span>
FC./span>
=/span>
(/span>
的)/span>
=>/span>
{/span>
umeryionviewdidenter./span>
(/span>
(/span>
的)/span>
=>/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewdidenter活动触发'/span>
的)/span>
;/span>
}/span>
的)/span>
;/span>
使用ViewDididleave./span>
(/span>
(/span>
的)/span>
=>/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewdidleave活动发射'/span>
的)/span>
;/span>
}/span>
的)/span>
;/span>
使用viewwillenter./span>
(/span>
(/span>
的)/span>
=>/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewwillenterer活动发射'/span>
的)/span>
;/span>
}/span>
的)/span>
;/span>
使用viewwillleave./span>
(/span>
(/span>
的)/span>
=>/span>
{/span>
安慰/span>
。/span>
日志/span>
(/span>
'ionviewwillleave活动发射'/span>
的)/span>
;/span>
}/span>
的)/span>
;/span>
返回/span>
(/span>
/span>
离子页面span class="token operator" c-id="168.652.7.138">
>/span>
/span>
离子主艇span class="token operator" c-id="168.658.7.142">
>/span>
/span>
Iontoolbar.span class="token operator" c-id="168.664.7.146">
>/span>
/span>
Iontitle.span class="token operator" c-id="168.670.7.150">
>/span>
家span class="token operator" c-id="168.673.7.152">
/span>
//span>
Iontitle.span class="token operator" c-id="168.678.7.155">
>/span>
/span>
//span>
Iontoolbar.span class="token operator" c-id="168.686.7.160">
>/span>
/span>
//span>
离子主艇span class="token operator" c-id="168.694.7.165">
>/span>
/span>
离子联系span class="token operator" c-id="168.700.7.169">
>/span>
/span>
//span>
离子联系span class="token operator" c-id="168.707.7.173">
>/span>
/span>
//span>
离子页面span class="token operator" c-id="168.715.7.178">
>/span>
的)/span>
;/span>
}/span>
;/span>
出口/span>
默认/span>
主页span class="token punctuation" c-id="168.734.7.190">
;/span>
注意:功能组件不需要包裹code c-id="168.742.6.1"> 含量增生/code> 作为类组件的HOC。/p>
反应生命周期方法/a>
反应中的所有生命周期方法(code c-id="168.755.5.1"> ComponentDidMount./code> 那code c-id="168.758.5.3"> componentwillunmount./code> 等等..)也可供您使用。然而,由于离子反应管理页面的寿betway东盟体育app命,因此某些事件可能在您期望的时候可能不会着火。例如,code c-id="168.761.5.5"> ComponentDidMount./code> 第一次显示页面时发出触发,但如果您远离页面IONIC可能会在DOM中保持页面,并且随后访问页面可能无法调用betway东盟体育appcode c-id="168.764.5.7"> ComponentDidMount./code> 再次。这种情况是离子生命周期方法存在的主要原因,仍然可以在当地框架的事件可能无法betway东盟体育app触发时向您提供呼叫逻辑的方法。/p>
每个生命周期方法的指导/a>
以下是每个生命周期事件的使用案例的一些提示。/p>
IonViewWillenter/code> - 自从code c-id="168.783.6.2"> IonViewWillenter/code> 每次导航到(无论初始化是否初始化)时,都会调用,这是从服务中加载数据的好方法。/li>
IonviewDienter./code> - 如果您看到使用性能问题code c-id="168.791.6.2"> IonViewWillenter/code> 加载数据时,您可以执行数据code c-id="168.794.6.4"> IonviewDienter./code> 反而。然而,此事件直到用户对用户可见后,此事件将无法触发,因此您可能希望使用加载指示灯或骨架屏幕,因此在转换完成后内容不会自然闪烁。/li>
IonviewWillleave./code> - 可以用于清理,如取消订阅数据源。自从code c-id="168.802.6.2"> componentwillunmount./code> 从当前页面导航时可能不会启动,如果在屏幕未视图中不希望它处于活动状态,请在此处放置您的清理代码。/li>
IonviewDidleave./code> - 当此事件触发时,您知道新页面已完全转换,因此在视图可见时,您可能通常可能无法执行的任何逻辑。/li>