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

React хук useComponentDidMount

Beginner

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

Введение

В этом практическом занятии мы научимся использовать хук useComponentDidMount в React. Этот хук позволяет нам выполнять обратный вызов сразу после монтирования компонента, аналогично методу componentDidMount() классовых компонентов. В конце этого практического занятия вы будете лучше понимать, как использовать этот хук и как он может быть полезен в ваших проектах на React.

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

Хук useComponentDidMount в React

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

Для выполнения обратного вызова сразу после монтирования компонента вы можете использовать хук useEffect() с пустым массивом в качестве второго аргумента. Это обеспечит то, что предоставленный обратный вызов будет выполнен только один раз при монтировании компонента. Функция useComponentDidMount(), показанная ниже, использует этот хук для реализации того же поведения, что и метод жизненного цикла componentDidMount() классовых компонентов.

const useComponentDidMount = (onMountHandler) => {
  React.useEffect(() => {
    onMountHandler();
  }, []);
};

const Mounter = () => {
  useComponentDidMount(() => console.log("Component did mount"));

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

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

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

Резюме

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