Вызов API перед первым рендерингом в функциональном компоненте в React.js

Если я хочу вызвать API после первого рендеринга компонента, я знаю, что у нас есть хук useEffect для вызова метода API. (Я говорю только о функциональных компонентах. Без классового компонента).

Есть ли способ, которым я могу вызвать API до того, как мой компонент отобразится в первый раз.

Причина этого вопроса в том, что если какая-то часть пользовательского интерфейса зависит от API, я не хочу показывать пользователю неполную информацию и при первом рендеринге, которая будет изменена после получения данных из API. Кажется, это плохой опыт работы с пользовательским интерфейсом.

Редактировать: я получил несколько советов использовать useLayoutEffect или любой расходный флаг, чтобы проверить, отображается ли он или нет. Я проверил, что useLayoutEffect не работает, и, используя флаг расходных материалов, мы только увеличиваем сложность.

Есть ли у нас лучший способ для этого?


reactjs javascript react-functional-component react-hooks react-lifecycle
person Nimish goel    schedule 20.04.2020    source источник
comment
Поскольку до и после рендеринга разница в миллисекундах, то как, по вашему мнению, до рендеринга будет иметь значение после рендеринга? В обоих случаях вам нужно что-то визуализировать (например, загрузку).   -  person HMR    schedule 20.04.2020

Ответы (2)


arrow_upward
2
arrow_downward

Я думаю, что useLayoutEffect можно использовать для чего-то подобного, передав пустой массив в качестве второго аргумента. useLayoutEffect(() => {...}, []);

Обновления, запланированные внутри useLayoutEffect, будут сбрасываться синхронно до того, как браузер сможет отрисовать.

Хотя вы всегда можете получить данные в родительском компоненте и передать их в качестве реквизита. Или — если вы не возражаете, что пока это экспериментальная функция — React Suspense пытается решить именно эту проблему.

person maten    schedule 20.04.2020
comment
до того, как браузер сможет рисовать, но не до того, как компонент отрендерится - person Kyr; 20.04.2020
comment
@Kyr, это правда, я отредактировал свой ответ, чтобы предоставить альтернативные методы. - person maten; 20.04.2020
comment
@Nimishgoel Вы правы. Однако встроенного хука для этого нет. Даже componentWillMount устарел. Вы можете написать собственный хук, подобный этому: stackoverflow.com/a/57073500/12402992, или использовать один из двух альтернативные варианты - person maten; 20.04.2020
comment
@Kyr, что означает визуализация компонента? Я думал, что это было визуализировано, когда оно было растеризовано графическим процессором и нарисовано на экране. - person duhaime; 25.02.2021
comment
@duhaime, я думаю, что рендеринг в контексте реакции можно считать возвратом из компонента (функции рендеринга) обновленной части виртуального DOM, верно? - person Kyr; 25.02.2021
comment
@Kyr да, я думаю, ты прав! Я обдумывал ситуацию :/ - person duhaime; 26.02.2021

arrow_upward
0
arrow_downward

Нет правильных способов сделать вызов API до того, как компонент будет визуализирован из того же компонента.

Вы можете предпочесть вызывать API в родительском компоненте и отображать компонент презентации, когда и только когда есть расходуемые данные.

Другой обходной путь для такого случая — сохранить флаг consumable внутри компонента, сделать запрос внутри useEffect, ничего не рендерить или какой-то загрузчик и рендерить что-то только после успешного завершения запроса.

person Kyr    schedule 20.04.2020