首页 > 其他分享 >React 18 useEffect 代码执行两次的问题

React 18 useEffect 代码执行两次的问题

时间:2023-10-01 16:55:36浏览次数:38  
标签:ignore 18 React 代码执行 组件 useEffect

https://github.com/zjy4fun/notes/issues/62

 

React 18 提出的新特性“并发渲染”,为了防止组件重复挂载的问题,React 在开发模式 && 严格模式下,useEffect 会执行两次(模拟组件挂载和组件卸载,让问题提早暴露),但是线上模式不会。

开发模式下,可以通过设置标志位防止 useEffect 执行多次

  let ignore = useRef(false)
  
  useEffect(() => {
    if(ignore.current) {
      return
    }
    setTimer(setInterval(() => {
      setCount(count => count + 1)
    }, 1000))
    ignore.current = true
    return () => {
      clearInterval(timer)
    }
  }, [])

也许有更好的方法,暂时先这样解决了。。。

标签:ignore,18,React,代码执行,组件,useEffect
From: https://www.cnblogs.com/zjy4fun/p/17738988.html

相关文章

  • P5299 [PKUWC2018] Slay the Spire
    P5299[PKUWC2018]SlaytheSpire洛谷:P5299[PKUWC2018]SlaytheSpireLOJ:#2538.「PKUWC2018」SlaytheSpire前言:请分清楚使用和抽取。九条要抽取\(m\)张牌,但只会使用\(k\)张牌。首先考虑当抽出的\(m\)张牌确定时的策略:记\(m\)张牌中强化牌的数量为\(c\)。......
  • 2023-2024-1 学号20231318《计算机基础与程序设计》第一周学习总结
    作业信息作业链接这个作业属于哪个课程2022-2023-1-计算机基础与程序设计这个作业的要求在哪里2023-202341计算机基础与程序设计第一周作业这个作业的目标作业正文2023-2024-1学号20231318《计算机基础与程序设计》第一周学习总结教材学习内容总结快......
  • CF1875B Jellyfish and Game
    思路题意大概是两人都有一组数,奇数轮,第一个人可以选择和第二个人交换一个数字也可以不换,偶数轮,第二个人可以选择和第一个人交换一个数字也可以不换。首先可以猜测,我们每次都应该选择交换对方的最大值和自己的最小值,如果自己的最小值都比对方大的话就不交换。应该比较好想,这里感......
  • CF1873G ABBC or BACB
    思路首先发现,无论是AB变BC,还是BA变CB,最重要的都是A,因为B的数量不会变化,C既不是变化所需要的,数量还会变多,只有A是需要的并且数量还会变少。首先思考AB变BC的情况,什么情况下可以继续变化呢?很显然AB前还有A就可以继续变化,而后面因为C的出现是不可能继续变化的,......
  • CF1873F Money Trees
    思路要求最长长度,想到可以二分答案。那么现在需要考虑如何快速验证答案是否正确。可以\(O(n)\)枚举区间左端点,因为有了长度,所以可以直接获得右端点的值,直接验证右端点是否合法。因为要求区间的每个数都是右边的数的倍数,所以可以提前预处理每个点最远的满足这个条件的右端点,......
  • CF1875D Jellyfish and Mex
    思路看到\(n\)的范围只有\(5000\),并且\(\sumn\)的范围也是\(5000\),所以可以考虑\(n^2\)的做法。每次操作肯定都是一次性删完某个数字,如果删除某个数字删一半又去删别的数字,答案肯定会变大。所以我们可以考虑统计所有数字的数量,记为\(num_i\),来计算删完某个数字的最小......
  • CF1875C Jellyfish and Green Apple
    思路首先我们可以考虑把能分的都先分了,再选择去切剩下的苹果。那么我们只需要考虑苹果数量少于人数的情况,每个人能分的苹果都必然少于目前的单个苹果,所以每个苹果都必须切一刀,那么答案数就会增加当前的数量,再把能分的都分了,重复这一过程,直到分完为止。这样去切一定是最优的。那......
  • 题解 CF1875D【Jellyfish and Mex】
    显然,除非\(\operatorname{mex}a=0\),否则不会删除\(>\operatorname{mex}a\)的数。而\(\operatorname{mex}a=0\)时不对答案产生贡献,因此任意时刻我们都可以忽略\(a\)中\(>\operatorname{mex}a\)的数。又显然,一旦我们开始删一个数,就会先把所有与之相等的数删光。否则,设最先......
  • react中受控组件与非受控组件
    受控组件与非受控组件受控组件:其值由React控制的组件,通常使用state来控制和修改组件的值。例如受控的组件:classNameFormextendsReact.Component{constructor(props){super(props);this.state={value:''};}handleChange=(event)=>{thi......
  • 理解React页面渲染原理,如何优化React性能?
    ReactJSX转换成真实DOM过程当使用React编写应用程序时,可以使用JSX语法来描述用户界面的结构。JSX是一种类似于HTML的语法,但实际上它是一种JavaScript的扩展,用于定义React元素。React元素描述了我们想要在界面上看到的内容和结构。在运行React应用程序时,JSX会被转换成真实的DOM元素......