React хук useComponentDidMount

Введение

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

Skills Graph

Хук 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, чтобы улучшить свои навыки.