版本：v8

React 生命週期

本指南討論如何在 Ionic React 應用程式中使用 Ionic 生命週期事件。

Ionic 生命週期方法

Ionic 提供了一些您可以在應用程式中使用的生命週期方法

事件名稱	描述
`ionViewWillEnter`	在元件即將動畫顯示時觸發。
`ionViewDidEnter`	在元件動畫顯示完成時觸發。
`ionViewWillLeave`	在元件即將動畫移開時觸發。
`ionViewDidLeave`	在元件動畫移開完成時觸發。

這些生命週期僅在由路由器直接映射的元件上呼叫。這表示如果 /pageOne 對應到 PageOneComponent，則 Ionic 生命週期將在 PageOneComponent 上呼叫，但不會在 PageOneComponent 可能呈現的任何子元件上呼叫。

您存取這些方法的方式會因您使用的是基於類別的元件還是函式元件而異。我們在下面涵蓋這兩種方法。

基於類別的元件中的生命週期方法

若要在基於類別的元件中使用 Ionic 生命週期方法，您必須使用 withIonLifeCycle 高階元件 (HOC) 包裝您的元件，如下所示

export default withIonLifeCycle(HomePage);

注意

withIonLifeCycle 是從 @ionic/react 匯入的

然後您可以在類別元件上建立適當的生命週期方法，當事件發生時，HOC 會呼叫該方法。下面是包含每個生命週期方法的完整元件

import React from 'react';
import { IonHeader, IonPage, IonToolbar, IonTitle, IonContent, withIonLifeCycle } from '@ionic/react';

class HomePage extends React.Component {
  ionViewWillEnter() {
    console.log('ionViewWillEnter event fired');
  }

  ionViewWillLeave() {
    console.log('ionViewWillLeave event fired');
  }

  ionViewDidEnter() {
    console.log('ionViewDidEnter event fired');
  }

  ionViewDidLeave() {
    console.log('ionViewDidLeave event fired');
  }

  render() {
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonTitle>Home</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent></IonContent>
      </IonPage>
    );
  }
}

export default withIonLifeCycle(HomePage);

函式元件中的生命週期方法

Ionic React 為每個生命週期方法匯出 hooks，您可以在函式元件中使用這些 hooks。每個 hook 都會接受您希望在事件觸發時呼叫的方法。

import {
  IonContent,
  IonHeader,
  IonTitle,
  IonToolbar,
  useIonViewDidEnter,
  useIonViewDidLeave,
  useIonViewWillEnter,
  useIonViewWillLeave,
} from '@ionic/react';
import React from 'react';

const HomePage: React.FC = () => {
  useIonViewDidEnter(() => {
    console.log('ionViewDidEnter event fired');
  });

  useIonViewDidLeave(() => {
    console.log('ionViewDidLeave event fired');
  });

  useIonViewWillEnter(() => {
    console.log('ionViewWillEnter event fired');
  });

  useIonViewWillLeave(() => {
    console.log('ionViewWillLeave event fired');
  });

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent></IonContent>
    </IonPage>
  );
};

export default HomePage;

注意

函式元件不需要像類別元件一樣用 withIonLifeCycle HOC 包裝。

開發人員也可以選擇性地將反應式依賴性傳遞給每個生命週期 hook。然後，這些依賴性會傳遞給底層的 React useEffect hook

const [data, setData] = useState('foo');

useIonViewDidEnter(() => {
  console.log('ionViewDidEnter event fired');
}, [data]);