Разница между useEffect и useLayoutEffect

React.js
Разница между useEffect и useLayoutEffect

В хуках React useEffect используется для замены componentDidMount и componentDidUpdate. Основная функция заключается в выполнении некоторых побочных операций (таких как доступ к DOM, запрос данных) после рендеринга страницы.

И useLayoutEffect работает почти так же, как и useEffect, вы заменяете все useEffect в вашем существующем коде на useLayoutEffect, вы почти не видите никакой разницы.

Так в чем же между ними разница? См. следующий код:

function App() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    if (count === 0) {
      const randomNum = 10 + Math.random()*200
      setCount(10 + Math.random()*200);
    }
  }, [count]);

  return (
      <div onClick={() => setCount(0)}>{count}</div>
  );
}

11

Запустите вышеуказанный компонент, нажмите на div, и страница обновит строку случайных чисел.

Если вы нажмете непрерывно, вы обнаружите, что строка чисел дрожит.

Причина в том, что каждый раз, когда вы нажимаете на div, счетчик будет обновляться до 0, а затем счетчик будет изменен на строку случайных чисел в useEffect.

Таким образом, страница сначала будет отображаться в 0, а затем в случайное число.Поскольку обновление происходит очень быстро, мерцание.

Далее мы меняем useEffect на useLayoutEffect:

function App() {
  const [count, setCount] = useState(0);
  
  useLayoutEffect(() => {
    if (count === 0) {
      const randomNum = 10 + Math.random()*200
      setCount(10 + Math.random()*200);
    }
  }, [count]);

  return (
      <div onClick={() => setCount(0)}>{count}</div>
  );
}

22

Мерцание исчезло.

По сравнению с использованием useEffect, когда вы нажимаете на элемент div, счетчик обновляется до 0. В это время страница не будет отображаться. Вместо этого страница будет обновлена ​​после изменения внутреннего состояния useLayoutEffect, поэтому страница будет не мерцать.

Суммировать

  1. По сравнению с useEffect, useLayoutEffect может решить проблему мерцания страницы в некоторых сценариях функций, выполняя синхронное обновление состояния.
  2. useEffect может удовлетворить 99% сцены, а useLayoutEffect блокирует рендеринг, используйте его с осторожностью.

Reference

When to useLayoutEffect Instead of useEffect

Категории