javascript - 状态未在 StrictMode 中更新

Question

经过一番试验，我发现在严格模式下会出现以下问题。
如果有人可以解释原因，我会很感兴趣。
举这个简单的例子，里面渲染 我只是安排一个更新状态的超时 :
Example :

let firstRender = true; // Normally I would use ref but I was playing with example

export default function App() {
  let [data, setData] = React.useState({ name: 'Nick' });

  // Schedule a timeout on first render
  if (firstRender) {
    setTimeout(() => {
      console.log('Running');

      setData((ps) => ({
        ...ps,
        name: 'Paul',
      }));
    }, 1000);
  }

  console.log('Running render');
  firstRender = false;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

如果你运行 这个例子没有严格模式 ，然后你会在一秒钟后在屏幕上看到“保罗”，正如我所预料的那样。
如果您使用严格模式，它将始终在屏幕上显示“尼克”。想法为什么？
更新 : 似乎使用 useRef而不是全局变量 firstRender在严格模式下也修复了这个问题。好奇为什么会这样？

Answer 1

这是因为严格模式 intentionally invokes your function component body twice (在开发模式下)以帮助发现意外的副作用。
在第二次调用时，您的 firstRender变量是 false所以你的 setTimeout 不会运行。
需要注意的是，第二次调用 不只是像您从状态更新中获得的重新渲染 .这是对整个组件主体的第二次调用。不保存状态。 React 调用你的组件函数一次，丢弃结果，然后再次调用它以获取输出。
来自 the docs :

Because the above methods might be called more than once, it’s important that they do not contain side-effects.

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

• Function component bodies