为什么功能性 React 组件中的默认值会在渲染后更新？

Question

我很难理解为什么我在这个 React 组件的控制台中记录了不同的值：

const MyComponent = () => {

  // Initialise data with a random value:
  const [data, setData] = React.useState(
    () => {
      const data = _.sampleSize(_.range(5), 3)
      // Print data on initialisation:
      console.log('init data in default:', data)
      return data
    }
  )

  React.useEffect(() => {
    // Print data after the component is rendered:
    console.log('init data after render:', data)
  })

  return (
    <div>{data}</div>
  );
};

控制台的输出是：

[Log] init data in default: – [0, 3, 1] (3)
[Log] init data after render: – [2, 1, 3] (3)

并且组件被渲染到：<div>213</div>

但是为什么值不同呢？

我的理解是在组件渲染之前，调用useState下的函数。函数返回的值赋值给data，data的值用于在屏幕上渲染组件。 useState下的函数只调用一次，我们从不调用setData，所以值应该是一样的。我错过了什么？

UPD：我尝试创建一个代码sn-p，这是我第一次使用codesandbox，所以如果它不起作用请告诉我： https://codesandbox.io/s/jovial-glade-9jm75?file=/src/App.js

Answer 1

Strict mode 导致 React 运行组件两次，以检测各种可能的不安全代码部分。这有点像有限的运行时 linter。

在里面：

从 React 17 开始，React 会自动修改 console.log() 等控制台方法，以在第二次调用生命周期函数时静默日志。

第一次调用组件时，useState 调用中的console.log 运行，记录生成的第一个数据。

第一次调用没有完全渲染； useEffect 永远不会运行。相反，React 会再次运行该组件来检查是否存在不一致。在第二次运行时，useState 中的 console.log 被抑制。

然后，稍后，在第二次运行时，组件真正正确地完成了渲染，并且它的效果挂钩运行，它记录了之前生成的数据（但未显示在控制台中）。

Here's a post describing a very similar issue.