reactjs - React.js 中 useEffect 的奇怪行为

Question

我在我的 React 应用程序中遇到了一些奇怪的行为，其中带有状态(比如 state1)作为第二个参数的 setEffect 正在更改另一个变量(不是状态)而没有调用 setState1。因此，我编写了以下代码以查看是否会发生相同的情况，并且确实如此:

import React, { useState, useEffect } from 'react';

function App() {

  let [state1, setState1] = useState('');
  let count = 0;

  useEffect(() => {
    count = count + 1000;
    console.log('USEEFFECT_count: ' + count);
  }, [state1]);

  setInterval(() => {
    console.log('SETINTERVAL_count: ' + count);
  }, 1000);

  return (
    <div className="App">
    </div>
  );
}

export default App;

基本上，只有在调用 setState1 来更改 state1 的值时，变量 count 才应该收到 1000 的值。但是控制台的返回是

SETINTERVAL_count: 1000
SETINTERVAL_count: 0
SETINTERVAL_count: 1000
SETINTERVAL_count: 0
SETINTERVAL_count: 1000
SETINTERVAL_count: 0
SETINTERVAL_count: 1000
SETINTERVAL_count: 0
SETINTERVAL_count: 1000
SETINTERVAL_count: 0
 

正如预期的那样，useEffect 中的 console.log 永远不会被调用。但如果是这样的话，那么:

他为什么要加 1000 来计算？

为什么这个值重置为 0 ？

如果我添加一个 state2 和另一个总和为 5000 的 useEffect ，它会从第一个 useEffect 增加到 1000 :

import React, { useState, useEffect } from 'react';

function App() {

  let [state1, setState1] = useState('');
  let [state2, setState2] = useState('');
  let count = 0;

  useEffect(() => {
    count = count + 1000;
    console.log('USEEFFECT1_count: ' + count);
  }, [state1]);

  useEffect(() => {
    count = count + 5000;
    console.log('USEEFFECT2_count: ' + count);
  }, [state2]);

  setInterval(() => {
    console.log('SETINTERVAL_count: ' + count);
  }, 1000);

  return (
    <div className="App">
    </div>
  );
}

export default App;

console.log 的结果:

SETINTERVAL_count: 6000
SETINTERVAL_count: 0
SETINTERVAL_count: 6000
SETINTERVAL_count: 0
SETINTERVAL_count: 6000
SETINTERVAL_count: 0
SETINTERVAL_count: 6000
SETINTERVAL_count: 0

Answer 1

他们对您使用代码获得的输出没有什么奇怪的。
在您的代码中，useEffect钩子(Hook)只会执行一次，即在初始渲染之后。那么它只会在 state1 时执行已更改，但在您的代码中从未发生过，所以 useEffect只执行一次并设置 count至1000 .

And the console.log inside the useEffect is never called, as expected

不，它会被调用。 useEffect将在初始渲染后执行，这就是 count 的原因的值变为 1000 .有 state1在 useEffect 的依赖数组中钩子(Hook)并不意味着它只会在 state1 时执行被改变。 useEffect总是在初始渲染之后执行，不管你是否传递了依赖数组或者你传递了一个非空的依赖数组 .
现在，为什么 setInterval 的问题正在记录 count 的两个值?
那是因为您的代码中设置了两个间隔 .一次在初始渲染时 count是 0第二是因为 Strict Mode 它会渲染你的组件两次。
如 setInterval()在组件内部的顶层调用，每当组件重新渲染时都会设置一个新的间隔。当您的组件渲染两次时，设置了两个间隔。每个区间的回调函数对 count都有一个闭包定义回调函数时。
在 index.js文件，您将看到 App包裹在 React.StrictMode 中的组件如下所示:

<React.StrictMode>
  <App/>
</React.StrictMode>

如果您删除 React.StrictMode组件，您将看到 count 中只有一个值将记录到控制台
没有严格模式的输出:

USEEFFECT_count: 1000 
SETINTERVAL_count: 1000 
SETINTERVAL_count: 1000 
SETINTERVAL_count: 1000 
SETINTERVAL_count: 1000