Метод componentDidMount жизненного цикла компонента
Большинство веб-разработчиков в какой-то момент должны вызывать конечную точку API для извлечения данных. Если вы работаете с React, важно знать, где выполнить это действие. Лучшей практикой в React является размещение вызовов API или любых вызовов на ваш сервер в методе жизненного цикла componentDidMount() . Этот метод вызывается после того, как компонент подключен к DOM. Но помните, что любые вызовы setState() здесь (и не только здесь) приводят к повторному рендерингу вашего компонента. Когда вы вызываете API в этом методе и устанавливаете свое состояние с данными, возвращаемыми API, он автоматически инициирует обновление после получения данных.
В componentDidMount() есть ложный вызов API. Он устанавливает состояние через 2,5 секунды, чтобы имитировать вызов сервера для извлечения данных. В этом примере запрашиваются текущие общие активные пользователи для сайта. В методе рендеринга визуализируйте значение activeUsers в h1 . Посмотрите, что происходит в предварительном просмотре, и не стесняйтесь менять таймаут, чтобы увидеть различные эффекты.