ReactJS useLayoutEffect Hook

Опубликовано: 7 Августа, 2021

UseLayoutEffect работает аналогично useEffect, но работает асинхронно, как ловушка useEffect, срабатывает синхронно после завершения загрузки DOM. Это полезно для синхронного повторного рендеринга DOM, а также для чтения макета из DOM. Но чтобы предотвратить блокировку загрузки страницы, мы всегда должны использовать хук useEffect.

Ловушка useLayoutEffect работает на той же стадии, что и методы componentDidMount и componentDidUpdate. Мы должны использовать useLayoutEffect только в том случае, если useEffect не дает ожидаемого результата.

Синтаксис :

 useLayoutEffect ()

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

Демо-версия функции создания приложения-реакции в npx

Шаг 2: После создания папки проекта, т.е. functiondemo, перейдите к ней с помощью следующей команды:

 cd functiondemo

Структура проекта: это будет выглядеть следующим образом.

Структура проекта

Пример: В этом примере мы собираемся создать приложение для смены имен, которое изменяет имя состояния при вызове ловушки useLayoutEffect.

App.js: теперь запишите следующий код в файл App.js. Здесь App - это наш компонент по умолчанию, в котором мы написали наш код.

Javascript

 import React, { useLayoutEffect, useState } from 'react' ;
 
const App = () => {
  const [value, setValue] = useState( 'GFG' );
   
  useLayoutEffect(() => {
    if (value === 'GFG' ) {
     // Changing the state
      setValue( 'GeeksForGeeks' );
    }
    console.log( 'UseLayoutEffect is called with the value of ' , value);
  }, [value]);
 
  return <div>{value} is the greatest portal for geeks!</div>;
 };
 
export App; default 

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Выход:

Курсы ProductStar

ReactJS useLayoutEffect Hook

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ