reactjs - react ，增量全局变量没有按预期工作

Question

我试图跟踪渲染组件的次数。但是，似乎 renderCounter 每次都会增加 2。
为什么会发生这种情况？我知道使用全局变量是一种不好的做法，但我对发生这种情况的原因很感兴趣。
https://codesandbox.io/s/rendercounter-does-not-increment-correctly-093ok?file=/src/App.js

let renderCounter = 1;

function App() {
  const [i, inc] = useReducer((_) => _ + 1, 1);
  // render
  console.log(JSON.stringify(i), "th click");
  console.log("renderCounter", JSON.stringify(renderCounter));
  renderCounter = renderCounter + 1;
  return (
    <div>
      <button onClick={inc}>increment</button>
    </div>
  );
}

export default App;

Answer 1

是的，react render 会为你执行两次。为什么 - 因为你的应用默认包裹在 index.js 中的 React.StrictMode 组件中，为什么/什么 - 已经有很多资源涵盖了它，所以让我举个例子 - https://medium.com/@andreasheissenberger/react-components-render-twice-any-way-to-fix-this-91cf23961625
但是让我马上在这里提一下 - 如果您在生产模式下构建它就不会发生

更新
现在它变得非常有趣，而且我有点不喜欢 React 开发人员所做的。所以以上所有内容都是有效的，是的，但是作为对这篇文章的评论建议 - 为什么我们没有看到 console.log 消息 2 次？
嗯，因为这个 - https://github.com/facebook/react/pull/18547
React 开发人员只是在第二次渲染时禁用控制台日志。
所以要查看实际行为(每次应该记录 2 次)，您需要使用控制台日志，我所做的 - 将其包裹在 setTimeout 中:

setTimeout(() => console.log(...))