Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
484 views
in Technique[技术] by (71.8m points)

useEffect清除副作用带第二个参数,反而可以正常清除定时器?求解疑

先描述一下,
看文档上写清除副作用只需要返回一个函数即可,相当于componentWillUnmount

使用的代码

  let timer: any
  const afterChartCreated = (reChart) => {
    if (reChart) {
      timer = window.setTimeout(() => {
      console.log('定时器')
        const data = reChart.getCSV();
        setchartData(data);
      }, 5000);
    }
  };

 

我以为清除方式:立即清除了好像,‘定时器’没有打印

  useEffect(() => {
    return () => {
      clearInterval(timer)
    }
  })

实际生效的方式:

 useEffect(() => {
    return () => {
      clearInterval(timer)
    }
  }, [])

我的疑惑点:
1:第二个参数为[],时候不是相当于componentDidMount嘛,怎么反而清除,并且代码也执行了?
2:为什么我以为的清除方式,没有启用成功定时器?
描述的有点乱,希望大佬解疑


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

我的理解
useEffect 第二个参数必须要有,至少都要写个空数组,如果是空数组就可以理解成 didmount
第二个参数可以理解为监听的变量,在第二个参数里的变量改变时会执行第一个方法
第一个方法的返回值在监听空数组的时候是 didunmount


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...