useEffect 是否会阻止渲染页面？

Question

每次用户到达或重新加载页面时，我都想做一点加载时间。我为此使用了一个 useEffect ()，它有一个 setTimeout ()，它只是在 1 秒后将变量 setLoading 设置为 false。但我的问题是这个 setTimeout 是否会阻止函数的 return ？否则它是无用的，因为我希望这个 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 是否会阻止渲染页面？

Does useEffect block rendering the page?

javascript

settimeout

reactjs

use-effect