useEffect的return回调函数是在下一个useEffect被执行的时候才运行吗? 老师可以在帮我梳理一下顺序吗?

Question

老师可以再帮我梳理一下useEffect 的 return callback什么时候被运行吗？我console log 了一些信息，暂时的理解是:
假设 delay = 5

• 1. useEffect#1 执行: setTimeout被call -> ( ) => { setDeboucedValue(value) } 这个函数会在五秒后被执行。
• 2. 这个时候value被改变， useEffect#2 执行，这个时候useEffect#1的callback运行，清理了useEffect#1里的timer，然后在useEffect#2里 setTimeout被call -> ( ) => { setDeboucedValue(value) } 这个函数会在五秒后被执行，以此类推。
• 3. 直到最后一个useEffect，没有新的useEffect出现来清掉timeout， setDebouncedValue才被运行，debouncedValue才最终被更新。

那是不是说，只有下一个useEffect的出现才会让上一次useEffect的callback运行呢? 我这样的理解对吗？

谢谢老师！

Answer 1

qq_skywalker_23855555 2021-02-16 11:14:14

看官方文档一清二楚 

https://zh-hans.reactjs.org/docs/hooks-effect.html#%E4%BD%BF%E7%94%A8-hook-%E7%9A%84%E7%A4%BA%E4%BE%8B

Answer 2

Nolan 2021-02-06 16:07:26

你在这里的理解是对的，对于useEffect，useEffect内部运行之前，会执行上一次useEffect返回的回调函数

• 大艾尔 #1

  原来如此。先学VUE再学REACT真的觉得好高大上

• Nolan 回复 大艾尔 #2

  只要理解了这些原理写出来的代码会很容易理解