是否可以 "initialize" 一个 React 组件？

Question

所以基本上我正在尝试为我的游戏实现重启功能，我希望能够以某种方式“重新加载”我的 GameView 组件。这是生命周期： 1. React renders/mounts 我的组件 2. 用户与组件交互并发生变化 3. 现在，我想调用一个函数来基本上清除所有这些变化并带来组件（及其所有child) 回到步骤 1 中的状态。以下是我想到的 2 种可能的解决方案：

保持相同的组件并将所有状态变量设置回其初始值
制作新组件并替换旧组件

第一个不是很实用，因为当涉及子组件时它变得非常复杂，第二个不起作用，因为显然 React 仍然认为新组件与旧组件相同，因为它们具有相同的 props？我不确定为什么，但我无法让它工作。

非常感谢您的帮助！

Answer 1

您可以使用 key 强制反应以卸载和重新安装组件。 Keys 为 React 提供了关于一个渲染中的哪个元素对应于下一个渲染中的哪个元素的附加信息。如果键不同，那么这会告诉 React 它们是不同的元素，即使它们具有相同的类型。

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

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

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

是否可以 "initialize" 一个 React 组件？

Is it possible to "initialize" a React component?

javascript

components

reactjs