為什麼在沒有更改props或state的情況下重新渲染？

Question

我們有一個非常簡單的應用程序，只包含一個 useEffect，其中包含一個 console.log("first")。 問題是，我希望 console.log("first") 在執行時只列印一次，但我不知道為什麼會發生重新渲染，並且列印兩次。請指導我，謝謝。

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

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</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處理函數中的清理工作，請參考這篇文章。