React хук useIsomporphicEffect

Введение

В этом лабораторном задании мы будем изучать использование хука useIsomorphicEffect в React. Этот хук позволяет решить проблему применения useEffect() на сервере и useLayoutEffect() на клиенте, обеспечивая выполнение одного и того же эффекта независимо от среды. В ходе выполнения этого лабораторного задания мы научимся использовать хук useIsomorphicEffect для создания согласованных и надежных эффектов в наших React-приложениях.

Skills Graph

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