为什么多个 useEffect 不会相互覆盖答案

【问题标题】：Why multiple useEffect not override each other为什么多个 useEffect 不会相互覆盖
【发布时间】：2020-09-14 20:42:54
【问题描述】：

我是生命周期钩子的新手，如果这是非常基本且理解的，请原谅我，但我不明白那么为什么所有不同的 useEffect 方法都被不同地调用？

我知道 JavaScript 不支持函数过载。

所以如果我写这个，

add(){
  console.log("asd")
}
add(c){
console.log("asdfgh");
}
add();//asdfgh

这将打印asdfgh，即使它在没有参数的情况下调用，

那么为什么所有 useEffect 函数都被执行，即使它们具有相同的名称？

【问题讨论】：

标签： javascript reactjs react-native react-hooks use-effect

【解决方案1】：

在您的示例代码中，您在前两个调用中定义函数，而不是使用它们。当您使用多个useEffects 时，您将多次调用useEffect( myEffectFunction )。这类似于您的代码是这样编写的：

function add(a, b){
  console.log(a + b)
}
add( 3, 5);// Calling your function the first time.
add( 1, 2);// Calling your function the second time.

请注意，这与下面的代码在结构上没有什么不同，这就是您在功能组件中使用useEffect 的方式——您没有重新定义useEffect，您只是调用useEffect 两次，不同之处参数。

function MyFirstEffect(){
  ...
}
function MySecondEffect(){
  ...
}
useEffect( myFirstEffect, [] ) // Calling useEffect once.
useEffect( mySecondEffect, [] ) // Calling useEffect a second time.

查看useEffect 文档可能会有所帮助；您可以看到在文档示例中，在useEffect 的参数内部定义了一个函数，但useEffect 本身只是一个被调用的函数。

基于 cmets 的更新：

【讨论】：

我的问题是，即使我定义了多个 useEffect，每个 useEffect 都会被调用。但是当我多次定义相同的函数名时，只会调用一个函数。为什么会这样？
@Aishwarya 这个答案已经解释了这一点。类中的方法定义与另一个函数中的函数调用完全不同。
@Aishwarya 我已经添加了更多解释，这有帮助吗？