useEffect 为何会调用两次

`useEffect` 函数在 React 中通常用于副作用操作，如数据获取、订阅事件或处理DOM更新后的清理工作。当 `useEffect` 首次被挂载（mounting）到组件中时，它会被调用一次，这是为了执行初始化的行为。

然而，如果满足某些特定条件，React 会决定对同一个 `useEffect` 进行第二次调用。主要有两种情况可能导致这种情况：

1. **依赖数组的更新**：当你在 `useEffect` 的依赖数组 (`dependencies`) 中添加或移除一个变量时，即使没有直接修改这些变量，React 也会重新评估依赖，并根据新的依赖项判断是否需要再次运行副作用。例如，如果你在函数里引用了状态(state)的一个属性，而这个属性本身是从外部传入或者从另一个生命周期钩子（如`useState`或`useReducer`）动态变化的，那么`useEffect`可能会被执行第二次。

2. **函数返回值的变化**：当 `useEffect` 返回一个非空值（如一个清除函数或 Promise）时，React 会在组件卸载前调用该函数一次，作为清理过程的一部分。这意味着如果返回值改变，即使依赖数组不变，`useEffect` 也可能被调用第二次。

要避免不必要的多次调用，应确保依赖列表是最小化的，并尽量避免在函数内更改数组元素位置，除非你确实有意让 `useEffect` 重新运行。

相关问题

useEffect为什么执行了两次

`useEffect` 执行多次的原因可能有很多，以下是一些常见的情况：

1. 初始化和更新时都会执行 `useEffect`，如果你在组件中多次调用了 `setState` 或者父组件更新了 props，那么 `useEffect` 也会被多次执行。

2. 你可能在 `useEffect` 中监听了某些状态或者事件，当这些状态或事件发生变化时，`useEffect` 会被重新执行。

3. 如果你在 `useEffect` 中使用了闭包，那么可能会导致 `useEffect` 多次执行。比如，你在 `useEffect` 中访问了某个父组件的状态或者属性，而这个状态或属性在每次父组件更新时都会发生变化，这样就会导致 `useEffect` 多次执行。

如果你无法确定具体原因，可以在 `useEffect` 中打印一些信息，帮助你找到问题所在。

useEffect 会检测两次监测的对象 内存地址是否相同，相同就跳过，不同才会执行 useEffect

`useEffect` 是 React 中的一个 Hook，用于副作用操作（比如订阅事件、发送 API 请求、设置定时器等）。它确实会在每次组件渲染时运行，但是它有一个特性叫做依赖数组（dependency array），用来确定哪些状态变化会触发 `useEffect` 的重新运行。

如果 `useEffect` 的依赖数组中包含了某个变量，React 会比较这个变量在前后渲染周期中的内存地址。如果地址相同，说明该变量的值未改变，因此 React 视其为“浅比较”，认为不需要再次执行 `useEffect`。只有当依赖项的值发生改变，即内存地址不同时，`useEffect` 才会被重新调用。

这是 `useEffect` 部分文档中的描述：

> By default, `useEffect` only runs after the render is committed to the screen. If you provide an array of dependencies to the effect as the second argument, it will run after every update where any of those dependencies change[^4]。

举个例子:

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('Component updated');
}, [count]); // 只有当 count 改变时，useEffect 会执行

setCount(1); // useEffect 会执行，因为 count 地址已变
setCount(count + 1); // useEffect 也会执行，因为 count 的值改变了