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

Question

我是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做同样的事情吗?所以我尝试工作。他那样做肯定有原因吧?我错过什么了吗?

Answer 1

当然React会重新渲染整个组件，但这也取决于一些条件。例如，如果你看一下你的代码，你已经把count变量作为一个依赖传递给useEffect钩子，这意味着如果count的值改变，React将在useEffect钩子内部渲染效果。

是的，你可以使用setTimeout达到同样的效果;setInterval是毫无意义，因为它完全取决于你作为a传递的count变量依赖。

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