React хук useIsomporphicEffect

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

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

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

Введение

В этом лабораторном задании мы будем изучать использование хука useIsomorphicEffect в React. Этот хук позволяет решить проблему применения useEffect() на сервере и useLayoutEffect() на клиенте, обеспечивая выполнение одного и того же эффекта независимо от среды. В ходе выполнения этого лабораторного задания мы научимся использовать хук useIsomorphicEffect для создания согласованных и надежных эффектов в наших 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-38391{{"React хук useIsomporphicEffect"}} react/hooks -.-> lab-38391{{"React хук useIsomporphicEffect"}} end

React хук useIsomporphicEffect

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

Для обеспечения правильного использования useEffect() на сервере и useLayoutEffect() на клиенте можно использовать typeof, чтобы проверить, определен ли объект Window. Если он определен, возвращаем useLayoutEffect(), в противном случае возвращаем useEffect(). Вот пример, как это можно реализовать:

const useIsomorphicEffect =
  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;

Затем в своем коде можно использовать useIsomorphicEffect(), как показано в этом примере:

const MyApp = () => {
  useIsomorphicEffect(() => {
    window.console.log("Hello");
  }, []);

  return null;
};

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

Это выведет 'Hello' в консоль при монтировании компонента и будет работать корректно как на сервере, так и на клиенте.

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

Резюме

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