Warum neu rendern, ohne Requisiten oder Status zu ändern?

Question

Wir haben eine sehr einfache Anwendung, die nur einen useEffect enthält, der wiederum einen console.log("first") enthält. Das Problem ist, dass ich möchte, dass console.log("first") bei der Ausführung nur einmal gedruckt wird, aber ich weiß nicht, warum das erneute Rendern erfolgt und es zweimal gedruckt wird. Bitte leite mich, danke.

Standardfunktion App() exportieren {
  useEffect(() => {
    console.log("first");
  }, []);

  zurückkehren (
    <div className="App">
      <h1>Hallo CodeSandbox</h1>
      <h2>Beginnen Sie mit der Bearbeitung, um zu erleben, wie etwas Magisches geschieht!</h2>
    </div>
  );
}

https://codesandbox.io/s/silly-kilby-yn38cj?file=/src/App.tsx

Answer 1

这是React 18的Strict Mode中的一个新功能，这种行为是有意的。这个新功能的主要原因是提醒开发者在effect处理函数中添加清理函数。所以基本上组件会被挂载两次，意味着它被挂载、卸载和重新挂载。然而，需要知道的是，这种行为只在开发模式下观察到，不会在生产构建中发生。 为了验证开发模式下的行为，请在您的effect处理函数中添加一个清理函数并尝试记录一些内容。例如：

export default function App() {
  useEffect(() => {
    console.log("first");

    return () => console.log("Unmount App");
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

现在日志的顺序将如下所示：

first
Unmount App
first

这样开发者就可以确保组件不容易出错，并在卸载组件时进行适当的清理。 为了更好地理解这一点，您可以参考文档中演示的这个实例。 如果您想更多地了解effect处理函数中的清理工作，请参考这篇文章。