是否可以“初始化”一個 React 組件？

Question

所以基本上我正在嘗試為我的游戲實現重啟 function，我希望能夠以某種方式“重新加載”我的 GameView 組件。 這是生命周期： 1. React 呈現/安裝我的組件 2. 用戶與組件交互並發生變化 3. 現在，我想調用 function 來基本上消除所有這些變化並帶來組件（及其所有子組件）回到步驟 1 中的 state。這是我想到的 2 種可能的解決方案：

• 保持相同的組件並將所有 state 變量設置回其初始化值
• 制作一個新組件並替換舊組件

第一個不是很實用，因為當涉及子組件時它變得非常復雜，第二個不起作用，因為顯然 React 仍然認為新組件與舊組件相同，因為它們具有相同的道具？ 我不確定為什么，但我無法讓它工作。

我將不勝感激一些幫助！

Answer 1

您可以使用一個key來強制反應以卸載和重新安裝組件。 Keys 為 React 提供了關於一個渲染中的哪個元素對應於下一個渲染中的哪個元素的附加信息。 如果鍵不同，那么這會告訴 React 它們是不同的元素，即使它們具有相同的類型。

const App = () => {
  const [gameNumber, setGameNumber] = useState();

  const resetGameView = () => {
    setGameNumber(prev => prev + 1);
  }

  return (
    <div>
      <GameView key={gameNumber} />
    </div>
  );
}