Какой хук React выполняет первый useEffect или useLayoutEffect?

Question

У меня есть компонент, и я хочу сделать некоторые вычисления прямо перед отображением HTML на экране. Поскольку и useEffect, и useLayoutEffect могут справиться с этой задачей, мой вопрос состоит в том, чтобы они оба были в коде, какой из них будет запущен первым, useEffect и useLayoutEffect?

Cheers

Answer 1

Это снова ваш собственный способ кодирования, однако, здесь есть небольшая информация, и вы всегда можете посмотреть на что-то большее.

useEffect(() => {
  // do side effects
   return () => /* cleanup */
 }, [dependency, array]);

 useLayoutEffect(() => {
  // do side effects
 return () => /* cleanup */
 }, [dependency, array]);

useEffect работает асинхронно и после того, как рендер отображается в экран.

вот несколько вещей на useEffect

1. Вы вызываете рендеринг каким-либо образом (изменение состояния или повторный рендеринг родителя)
2. React визуализирует ваш компонент (вызывает его)
3. Экран визуально обновляется
4. ТО запускается useEffect.

и

useLayoutEffect, с другой стороны, выполняется синхронно после рендеринга, но до обновления экрана

1. Вы вызываете рендеринг каким-либо образом (изменение состояния или родительский элемент). re-renders)
2. React рендерит ваш компонент (вызывает его)
3. useLayoutEffect запустится, и React ожидает его завершения sh.
4. Экран визуально обновлено

Так как @ Роберт предложил использовать useEffect большую часть времени.

Answer 2

UseLayoutEffect является синхронным, и оно заблокирует ваше приложение. Это также вызовет дополнительный рендер.

Я предлагаю использовать useEffect и оставить useLayoutEffect для некоторых крайних случаев.