【发布时间】：2021-05-24 03:39:03
【问题描述】：
React.js 中的奇怪行为。当我在道具中传递一些随机生成的值时。它在控制台日志中给出不同的输出。
在我调试时，它再次返回 App.js（父级）并检查其值，但控制台只有 2 个，而不是 4 个。
我在反应生命周期或这里缺少什么？
// App.js
function App() {
const rand = Math.random();
console.log(rand);
return (
<div className="App">
<Board rand={rand} />
</div>
);
}
export default App;
// Board.js
function Board({ rand }){
console.log(rand);
return(
<div className="Board"></div>
);
}
export default Board;
这里是 github 仓库：git@github.com:senseihimanshu/minesweeper.git
请检查 App.js 和 Board.js 以获得进一步的说明，并在开发工具的控制台中验证这两个数组不相同...这是问题所在。
【问题讨论】：
-
您将控制台日志记录为无意的副作用，而不是在组件实际上呈现到 DOM 时。使用
useEffect正确记录传递/更新的道具值。您还在App中生成随机值作为无意的副作用。你真正想做什么？ -
无法重现 - 你能澄清问题吗？ stackblitz.com/edit/react-c2w4ay?file=src%2FApp.js
-
您能解释一下“无意的副作用”这个词吗？在这种情况下是生命周期。 @DrewReese
-
当然。研究这个Lifecycle Diagram。一个函数组件的整个函数体就是“渲染”函数。当您在正文中执行诸如计算随机数或控制台日志之类的副作用时，您正在“渲染阶段”执行此操作，不应与组件混为一谈在“提交阶段”期间被渲染到 DOM。 React 可能会“渲染”组件任意次数，以计算与渲染到 DOM 的最后一个结果的“差异”。
-
我稍微研究了一下，这是我的结论 1. React.StrictMode 以某种方式影响了这种行为 (codesandbox.io/s/elegant-ellis-glhq7?file=/src/index.js) ，日志总是不同的，但呈现的数字是相同的，严格的此处启用模式。 2. 在这个例子中（stackblitz.com/edit/react-c2w4ay?file=src%2FApp.js），严格模式没有启用，一切都按预期工作。严格模式应该是这样的，我仍然不明白这种行为。在此处打开并发布：github.com/facebook/react/issues/20857
标签： javascript reactjs random react-props