I was reading the official docs on: https://react.dev/learn/keeping-components-pure#detecting-impure-calculations-with-strict-mode

我正在阅读官方文件：https://react.dev/learn/keeping-components-pure#detecting-impure-calculations-with-strict-mode

It talks about using:

它谈到了如何使用：

  <StrictMode>
    <App />
  </StrictMode>

to guard against functions that are accidentally written not as pure function.

以防止意外编写的不是纯函数的函数。

So I wrote some components that intentionally break the rules:

因此，我编写了一些故意违反规则的组件：

let bar = 1;

function Foo({ hmm }) {
  console.log("IN Foo");

  bar += Math.random();
  hmm += Math.random();

  return (
    <div>
      hmm is {hmm}, bar is {bar}
    </div>
  );
}

function App() {
  console.log("IN APP");

  bar += 10 + Math.random();

  return (
    <>
      <div>hi {bar}</div>
      <Foo hmm={123} />
      <Foo hmm={456} />
    </>
  );
}

export default App;

However, I cannot get React to warn or give an error about it. So what is the purpose of <StrictMode> if it doesn't give any warning?

然而，我不能对此作出警告或给出错误的反应。那么，如果 不发出任何警告，它的目的是什么呢？

StrictMode is not meant to provide a warning; rather, it intentionally renders the component twice so that you, the developer, can notice that it might not behave as you intended.

UnloadMode并不意味着提供警告;相反，它故意呈现组件两次，以便开发人员可以注意到它可能不按预期运行。

You can see this from the same linked documentation:

您可以从相同的链接文档中看到这一点：

Notice how the original example displayed “Guest #2”, “Guest #4”, and “Guest #6” instead of “Guest #1”, “Guest #2”, and “Guest #3”. The original function was impure, so calling it twice broke it.