useState hook 的 setState 函数会触发整个组件的重新渲染还是只是返回的 JSX 部分代码？答案

【问题标题】：Does setState function of useState hook trigger re-render of whole component or just the returned JSX part of the code?useState hook 的 setState 函数会触发整个组件的重新渲染还是只是返回的 JSX 部分代码？
【发布时间】：2021-10-11 12:37:19
【问题描述】：

我是 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 做同样的事情吗？所以我试过了，它奏效了。他这样做肯定是有原因的吗？我错过了什么吗？

【问题讨论】：

Can't we do the same thing with setTimeout? 是的，你可以，并且考虑到count 被用作效果的依赖项，间隔是毫无意义的。
这能回答你的问题吗？ react hooks and setInterval

标签： reactjs react-hooks

【解决方案1】：

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

是的，您可以使用 setTimeout 实现相同的效果；setInterval 是毫无意义，因为它完全取决于您作为依赖。

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

【讨论】：