是否可以更改 React 中 useEffect 的钩子和依赖项 boolean ？

发布于 2025-01-11 13:25:39 字数 767 浏览 0 评论 0原文

我正在 React 上研究 CSS Transition，它会在 2 秒后自动卸载。我正在考虑使用 useEffect 和 useState 来解决这个问题。

我知道改变 useEffect 内部的依赖关系会导致无限循环。

例如，下面的代码将导致无限循环。

  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(prev => prev + 1);
  },[count]);

但我认为如果我将依赖项设置为布尔值并在 useEffect 中设置 if 语句，就像下面的代码一样，就不会发生无限循环。

  const [showStatus, setshowStatus] = useState(false);

  useEffect(() => {
    const timeId = setTimeout(() => {
      if (showStatus === true){
        setshowStatus(false)
      }
    }, 2000)
    return (() => {clearTimeout(timeId)})
  }, [showStatus]);

我对 React 比较陌生，所以我担心这段代码。我使用这段代码有什么问题吗？

原文

I am working on CSS Transition on React that it automatically unmount after 2 seconds. I am thinking about using useEffect and useState to solve this problem.

I know that changing dependencies inside useEffect causes infinite loop.

For example, the code below will cause infinite loop.

  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(prev => prev + 1);
  },[count]);

But I think infinite loop won't happen if I set dependency to boolean and set if statement inside useEffect just like the code below.

  const [showStatus, setshowStatus] = useState(false);

  useEffect(() => {
    const timeId = setTimeout(() => {
      if (showStatus === true){
        setshowStatus(false)
      }
    }, 2000)
    return (() => {clearTimeout(timeId)})
  }, [showStatus]);

I am relatively new to React so I am worried about this code. Do I have any problems using this code?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别靠近我心 2025-01-18 13:25:39

我认为这里的答案更好

React hooks - 清除超时的正确方法和间隔

import { useState, useEffect } from "react";

const delay = 5;

export default function App() {
  const [show, setShow] = useState(false);

  useEffect(
    () => {
      let timer1 = setTimeout(() => setShow(true), delay * 1000);

      // this will clear Timeout
      // when component unmount like in willComponentUnmount
      // and show will not change to true
      return () => {
        clearTimeout(timer1);
      };
    },
    // useEffect will run only one time with empty []
    // if you pass a value to array,
    // like this - [data]
    // than clearTimeout will run every time
    // this value changes (useEffect re-run)
    []
  );

  return show ? (
    <div>show is true, {delay}seconds passed</div>
  ) : (
    <div>show is false, wait {delay}seconds</div>
  );
}

I think it's answered here better

React hooks - right way to clear timeouts and intervals

import { useState, useEffect } from "react";

const delay = 5;

export default function App() {
  const [show, setShow] = useState(false);

  useEffect(
    () => {
      let timer1 = setTimeout(() => setShow(true), delay * 1000);

      // this will clear Timeout
      // when component unmount like in willComponentUnmount
      // and show will not change to true
      return () => {
        clearTimeout(timer1);
      };
    },
    // useEffect will run only one time with empty []
    // if you pass a value to array,
    // like this - [data]
    // than clearTimeout will run every time
    // this value changes (useEffect re-run)
    []
  );

  return show ? (
    <div>show is true, {delay}seconds passed</div>
  ) : (
    <div>show is false, wait {delay}seconds</div>
  );
}

回复收藏 0 原文

~没有更多了~