Question

有没有办法确保以React编码的网页已完成加载？通常的JavaScript技巧似乎不适用于React，这意味着您不能安全地使用以下这些技巧：

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

我们正在从事自动化测试，因此，我们无法访问客户端代码，因此我们无法或应该创建回调等以获取所需信息。最简单的方法是使用线程睡眠，但这是非常不可靠，令人沮丧且不明智的做法。还有另一种方法，例如执行将返回此类信息的js脚本？

Answer 1

在根组件中使用componentDidMount生命周期方法。

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 state tu在JSX部件中显示一个Loader并在readState更改时将其隐藏

如何确保页面已完成在React网站上的加载

2 个答案: