Как убедиться, что страница завершилась загрузкой на сайте React

Question

Есть ли способ убедиться, что веб-страница, закодированная в React, завершила загрузку? Обычные уловки javascript, похоже, не работают для React, а это означает, что вы не можете использовать их безопасно:

document.readyState == 'complete' && jQuery.active == 0

Мы работаем над автоматизированными тестами, и из-за этого у нас не может быть доступа к клиентскому коду, поэтому мы не можем или должны создавать обратные вызовы и т. Д., Чтобы получить необходимую нам информацию. Самый простой способ - использовать потоковый сон, но это очень ненадежный, разочаровывающий и плохой метод. Есть ли другой способ, например, выполнить сценарий js, который будет возвращать такую ​​информацию?

Answer 1

Использовать componentDidMount метод жизненного цикла в корневом компоненте.

Answer 2

Использование нового API useEffect в сочетании с useState может помочь вам достичь того, чего вы хотите,

Примерно так:

Внутри вашего функционального компонента:

 function yourComponent() {
   const [isLoading, setLoader] = useState(true)
   useEffect(() => {
     // Here you can access your API to get the Network state instead on document ready
       setLoader(document.readyState == 'complete' && jQuery.active == 0)
   }, [])

   return (
     <div>
       {isLoading && <Loader />}
       {!isLoading && <OtherComponent />}
     </div>
    )}

тогда вы можете использовать состояние isLoading, чтобы отобразить Loader в вашей части JSX и скрыть его, если readState изменится