LabEx
ВходРегистрация

React useComponentWillUnmount Hook

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом лабораторном задании мы изучим хук useComponentWillUnmount в React, который позволяет нам выполнить функцию обратного вызова непосредственно перед демонтажом и уничтожением компонента. Используя этот хук, мы можем выполнять любые необходимые задачи по очистке, такие как удаление слушателей событий или отмену любых ожидающих запросов. В этом лабораторном задании мы получим практический опыт в использовании этого хука и поймем его поведение, которое аналогично методу жизненного цикла componentWillUnmount() в классовых компонентах.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Хук React useComponentWillUnmount

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавить код в script.js и style.css.

Чтобы выполнить функцию обратного вызова непосредственно перед демонтажом и уничтожением компонента, вы можете использовать хук useEffect() с пустым массивом в качестве второго аргумента. Верните предоставленную функцию обратного вызова, чтобы она была выполнена только один раз перед очисткой. Это поведение аналогично методу жизненного цикла componentWillUnmount() классовых компонентов. Также вы можете использовать следующий фрагмент кода, чтобы создать пользовательский хук useComponentWillUnmount(), который принимает функцию onUnmountHandler в качестве аргумента и выполняет ее перед демонтажом компонента:

const useComponentWillUnmount = (onUnmountHandler) => {
  React.useEffect(
    () => () => {
      onUnmountHandler();
    },
    []
  );
};

Затем вы можете использовать этот пользовательский хук в своем функциональном компоненте так:

const Unmounter = () => {
  useComponentWillUnmount(() => console.log("Component will unmount"));

  return <div>Check the console!</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<Unmounter />);

При демонтаже компонента в консоль будет выведено сообщение "Component will unmount".

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили лабораторную работу по хуку React useComponentWillUnmount. Вы можете практиковаться в других лабораторных работах в LabEx, чтобы улучшить свои навыки.