版本：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 事件已触发');
  }

  ionViewWillLeave() {
    console.log('ionViewWillLeave 事件已触发');
  }

  ionViewDidEnter() {
    console.log('ionViewDidEnter 事件已触发');
  }

  ionViewDidLeave() {
    console.log('ionViewDidLeave 事件已触发');
  }

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

export default withIonLifeCycle(HomePage);

函数式组件中的生命周期方法

Ionic React 为每个生命周期方法导出了钩子（hooks），你可以在函数式组件中使用。每个钩子接受你希望在事件触发时调用的方法。

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

const HomePage: React.FC = () => {
  useIonViewDidEnter(() => {
    console.log('ionViewDidEnter 事件已触发');
  });

  useIonViewDidLeave(() => {
    console.log('ionViewDidLeave 事件已触发');
  });

  useIonViewWillEnter(() => {
    console.log('ionViewWillEnter 事件已触发');
  });

  useIonViewWillLeave(() => {
    console.log('ionViewWillLeave 事件已触发');
  });

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

export default HomePage;

备注

函数式组件不需要像基于类的组件那样使用 withIonLifeCycle HOC 进行包装。

开发者还可以选择性地向每个生命周期钩子传递响应式依赖项。这些依赖项会被传递到底层的 React useEffect hook：

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

useIonViewDidEnter(() => {
  console.log('ionViewDidEnter 事件已触发');
}, [data]);