React 中的 Load 事件不起作用。如何制作页面加载器？

Question

我正在尝试制作一个页面加载器，因此我制作了一个

Loader

组件，该组件必须在

window

上添加加载事件，但它根本不起作用：

import React, {useEffect} from "react"
import './loader.sass'

const Loader = () => {
    useEffect(() => {
        console.log("Loading")
        window.addEventListener('load', () => console.log('Loaded'))
    }, [])
    return (
        <div id="loader">
            <div className="center">
                <div className="rect"></div>
                <div className="rect"></div>
            </div>
        </div>
    )
}

export default Loader

在

App.jsx

文件中，该组件首先导入，因此，正如我认为的，它必须首先渲染并启动事件侦听器，但什么也没有发生。

React render 有什么我不明白的地方吗？请告诉我您是否知道制作页面加载器的任何其他方法。我已经尝试将

addEventListener

放入

index.html

文件中，在这种情况下

load

事件触发得太早。

Answer 1

要创建加载器组件，只需使用此代码，该代码显示加载器 2 秒。

import React, { useEffect,useState } from "react"
import './loader.sass'

const Loader = () => {

  const [loader, setLoader] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoader(false)
    }, 2000);
  }, [])

  return (
    <>
      {loader && <div id="loader">
        <div className="center">
          <div className="rect"></div>
          <div className="rect"></div>
        </div>
      </div>}
    </>
  )
}

export default Loader