关于useEffect的一个小考点

在 react useEffect 中,我们都知道的是:
  1.第二个参数是用来监听变量变化后才选择是否执行该 effect 中方法的。
  2.在什么都不监听(useEffect 第二个参数为[])的情况下,组件销毁时会执行 return 中的逻辑。

那么,如果同时存在监听了变量和 return 方法时,useEffect 会怎样执行里面的逻辑呢?

1
2
3
4
5
6
7
8
9
10
11
12
// 为了方便比较组件销毁,这里添加一个不监听变量的effect
useEffect(() => {
return () => {
console.log("useEffect_[]执行了");
};
}, []);

useEffect(() => {
return () => {
console.log("useEffect_count执行了");
};
}, [count]);

首先,从字面意思上理解,当 count 发生变化后,会执行 useEffect 中的代码。当组件销毁时不监听变量的 effect 毫无疑问的会执行。而监听变量的 effect 也同样会执行 return 中的逻辑
组件销毁时


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!