这可能是一个有点高级的问题:
React说:如果有两个<Counter />组件，但如果任何一个在同一DOM树位置，它被视为同一个组件，因此没有卸载，状态将保持不变:
代码:
export default function App() {
const [isFancy, setIsFancy] = useState(false);
return (
<div>
{isFancy ? (
<Counter isFancy={true} />
) : (
<Counter isFancy={false} />
)}
<label>
<input
...
(注意:我们不会这样写代码.在现实生活中，我们可能只写一行:<Counter isFancy={isFancy} />，但这只是为了显示效果.
我还在Codesandbox上放了两个演示.以类似的方式书写，并与doctor 所说的一致:
https://codesandbox.io/p/sandbox/romantic-clarke-wtzdcc?file=%2Fsrc%2FApp.js个
https://codesandbox.io/p/sandbox/rough-fast-d29rn7?file=%2Fsrc%2FApp.js
这似乎是一条奇怪的规则，因为它们实际上是两个实例，但如果这就是Reaction的工作原理，那就这样吧.
然而，如果我试着用一种稍微不同的方式来写它:
https://codesandbox.io/p/sandbox/musing-sea-mz3qq4?file=%2Fsrc%2FApp.js个
return (
<div className="App">
{isFancy && <Counter isFancy={true} />}
{!isFancy && <Counter isFancy={false} />}
{theToggle}
</div>
);
然后突然之间，如果我切换到"Fancy or Not"，计数器就会自动重置.(如果我将计数增加到3，并切换它.现在计数将重置为0).
为什么会这样呢？
再思考P.S.个问题:
真的，每次重新渲染App,Counter实际上都是一个全新创建的实例，即使它很简单:
return <Counter isFancy={isFancy} />;
因此，Reaction并不关心它是不是一个新实例.它只关心在这个位置上它是否是具有该名称的组件.