Question

每次用户到达或重新加载页面时，我都会做一点加载时间。我为此使用了一个 useEffect ()，它有一个 setTimeout()，它在 1 秒后简单地将变量 setLoading 设置为 false。但我的问题是这个 setTimeout 是否阻止了函数的返回？否则它是无用的，因为我希望这个 useEffect 允许页面加载 html 并几乎立即呈现它。

  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 1000);
    return () => clearTimeout(timer);
  });

      {isLoading ? 
        <Loading />
      : (
        <Router>
          <Switch>
            <Route exact path="/">
              <Header showModal={showModal} />
              <div className="top">
                <div className="leftPart">
                  <Presentation />
                  <Skills />
                </div>
                <Timeline />
              </div>
              <Projects />
              <Footer />
              <ConnexionModal showModal={openModal} hideModal={hideModal} />
            </Route>
            <Route exact path="/admin">
              <Admin />
            </Route>
            <Route path="*">
              <Erreur404 />
            </Route>
          </Switch>
        </Router>
      )}

Answer 1

不，它根据定义是非阻塞的。

但是，如果您想实现加载逻辑，useEffect 绝对是正确的工具。

你只需要向它传递第二个参数。

  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 1000);
  }, []);

useEffect 会阻止渲染页面吗？

1 个答案: