时间戳

首页 > 解决方案 > useState 钩子的 setState 函数会触发整个组件的重新渲染还是只是返回的 JSX 部分代码？

reactjs - useState 钩子的 setState 函数会触发整个组件的重新渲染还是只是返回的 JSX 部分代码？

问题描述

我是 React 的初学者，我正在从 udemy 课程中学习它。最初我认为功能组件内的整个代码在状态更新后会重新渲染/重新运行。但是后来我在重定向之前看到了倒计时的这种实现并且感到困惑。

import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";

const LoadingToRedirect = () => {

  const [count, setCount] = useState(5);
  let history = useHistory();

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((currentCount) => --currentCount);
    }, 1000);

    // redirect once count is equal to 0

    count === 0 && history.push("/");

    // cleanup

    return () => clearInterval(interval);

  }, [count]);

  return (
    <div className="container p-5 text-center">
      <p>Redirecting you in {count} seconds</p>
    </div>
  );
};

export default LoadingToRedirect;

那么如果 setCount 触发了整个代码的重新渲染，为什么这里需要 setInterval 呢？我们不能用 setTimeout 做同样的事情吗？所以我试过了，它奏效了。他这样做肯定是有原因的吗？我错过了什么吗？

标签： reactjsreact-hooks

解决方案

当然 React 会重新渲染整个组件，但它也取决于一些条件。例如，如果您查看代码，您已将 count 变量作为依赖项传递给 useEffect 挂钩，这意味着如果 count 的值发生变化，React 将在 useEffect 挂钩内呈现效果。

是的，您可以使用 setTimeout 实现相同的目的；setInterval 毫无意义，因为它完全取决于您作为依赖项传递的计数变量。

如果您将 count 作为依赖项删除，那么您可以很容易地看到它不会重定向您所需的页面。

推荐阅读