反应 - 父组件和子组件之间的随机值不同

Question

我在实际项目中遇到过这个问题。为了更清楚地展示它，我构建了一个非常基本的项目，它只包含一个父组件和一个子组件。

我在父组件的主体中定义了一个随机值（无论是作为状态变量还是作为 'regular' 变量）并将其作为道具传递给子组件。
出于某种原因，当我在父组件的主体中记录 (console.log) 这个随机值时，它似乎与子组件主体中的值不同。它们在每个组件的 jsx 中是相等的，当我将值记录在父级的 useEffect 挂钩中时，但是当我将它们记录在每个组件的主体中时它们是不同的。

父组件：

import React, { useEffect } from 'react';
import ChildComponent from './ChildComponent';

function App() {
  const rand = Math.random();
  console.log('parent - in body', rand);

  useEffect(() => {
    console.log('parent - in useEffect', rand);    
  });

  return (
    <div>
      <h1>parent {rand}</h1>
      <ChildComponent rand={rand}></ChildComponent>
    </div>
  );
}

export default App;

子组件：

import React from 'react';

function ChildComponent(props) {
  console.log('child', props.rand);
  return (
    <div>
      <h3>child {props.rand}</h3>
    </div>
  );
}

export default ChildComponent;

结果（圈出控制台中不同的值）：

有人可以解释这种行为吗？

更新：
我意识到 index.js 文件中的 <React.StrictMode> 负责重新渲染，因此随机变量的值不同。
然而：

如果由于严格模式组件被渲染了两次，为什么每个 console.log() 只有一次出现？
移除严格模式来解决这个问题是否安全（另一方面我不想失去必要的东西）？
哪个组件被渲染了两次（父组件、子组件或两者），它是如何工作的？

Answer 1

这可能是重新渲染导致的问题。

记录的第一个值是第一个生成的值，在重新渲染后出现新值并且这是为 useEffect 记录的，因为 useEffect 在组件安装后执行并且DOM 已加载。

此外，重新渲染可能是您 index.js 中的 <StrictMode> 的原因，这会产生有意的重新渲染，以测试副作用并查找问题。

反应 - 父组件和子组件之间的随机值不同

react - Different random value between parent and child component

javascript

rendering

reactjs

react-component

react-hooks