reactjs：需要帮助来理解下面的代码[重复]

h43kikqp 于 2023-03-29 发布在 React

关注(0)|答案(2)|浏览(125)

此问题在此处已有答案：

What is the expected return of useEffect used for?（8个答案）
22小时前关门了。
我遇到了这个密码

const [count, setCount] = useState(0);
  useEffect(() => {
    const timerId = setTimeout(() => setCount(count + 1), 1000);
    return () => setTimeout(timerId);
  });

我知道useEffect语法是

useEffect(() => {
    something...which is executed
  });

但在代码中，我看到它在useEffect中返回

useEffect(() => {
    ....
    return () => 
  });

根据我的理解，它与

useEffect(() => {
    //const timerId = setTimeout(() => setCount(count + 1), 1000);
    setTimeout(() => setCount(count + 1), 1000);
    //return () => setTimeout(timerId);
  });

我有点困惑这是如何工作的

reactjs

来源：https://stackoverflow.com/questions/75862712/reactjs-need-help-to-understand-the-below-code

2条答案

按热度按时间

eqfvzcg81#

正如在answer here中指出的，useEffect的返回是清理，当组件卸载或每次渲染时，返回的函数都会运行。
所以要回答如何是

useEffect(() => {
    const timerId = setTimeout(() => setCount(count + 1), 1000);
    return () => setTimeout(timerId);
});

不同于

useEffect(() => {
    //const timerId = setTimeout(() => setCount(count + 1), 1000);
    setTimeout(() => setCount(count + 1), 1000);
    //return () => setTimeout(timerId);
});

我认为这是第一段代码的作者的困惑。我认为预期的代码是

useEffect(() => {
    const timerId = setTimeout(() => setCount(count + 1), 1000);
    return () => clearTimeout(timerId);
});

由于超时被绑定到window（全局范围），作者打算在每次渲染或卸载组件时清除以前的超时。

赞(0）回复(0）举报 2023-03-29

1zmg4dgp2#

如果在useEffect中返回函数，则称为cleanup function。该函数在组件卸载时执行。
作者试图做的是在组件卸载时清除计时器，但我认为你遇到的代码有点混乱
我想应该是这样的。

const [count, setCount] = useState(0);
  useEffect(() => {
    const timerId = setTimeout(() => setCount((count) => count + 1), 1000);
    return () => clearTimeout(timerId);
  }, []);

赞(0）回复(0）举报 2023-03-29

我来回答

reactjs：需要帮助来理解下面的代码[重复]

2条答案

相关问题

热门标签

最新问答