如何确保React网站页面加载完毕

Question

有没有一种方法来确保使用React编写的网页已经完成加载？通常的JavaScript技巧似乎对React无效，因此您不能安全地使用以下内容： document.readyState == 'complete' && jQuery.active == 0 我们正在进行自动化测试，因此我们无法访问客户端代码，因此我们无法或不应创建回调等以获取我们想要的信息。简单的方法是使用线程睡眠，但这非常不可靠，令人沮丧，并且是一种不好的做法。是否有另一种方法，例如执行将返回此类信息的JS脚本？

- gandalf_the_cool

---

你在哪些方面依赖于页面完全加载？ - Peter Lehnhardt

Answer 1

以防万一，如果有人需要...

以下方法是解决你的问题最好的方式。

function Component() {
    const [loaded, setStatus] = useState(false);

    document.onreadystatechange = () => {
        setStatus(document.readyState === "complete");
    }
    return {loaded ? <Loaded />: <Loading />};
}

- elcharitas

Answer 2

使用新的useEffect API和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状态在JSX部分显示加载程序，并在readState更改时隐藏它。

- ZEE

---

我无法访问功能组件以执行此操作。我们不是在创建代码，而是在测试它。 - gandalf_the_cool

这是端到端测试，因此我们使用Java和WebDriver。 - gandalf_the_cool