React хук useComponentDidMount

ReactReactBeginner
Практиковаться сейчас

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

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") subgraph Lab Skills react/jsx -.-> lab-38374{{"React хук useComponentDidMount"}} react/hooks -.-> lab-38374{{"React хук useComponentDidMount"}} end

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