React如何在子组件条件渲染时确定应保留的状态？

你可能误解了React维护状态的方式——状态不是按全局的useState调用顺序统一管理的，而是和组件实例绑定的。

拿你给的代码举例：

• App组件的visible状态属于App自己的组件实例，和子组件完全独立。
• 每个<Counter/>都是一个独立的组件实例，每个实例内部都有自己的count状态，互相不干扰。

当visible为true时，CounterGroup渲染两个Counter实例：第一个实例有它自己的count，第二个实例也有自己的count。
当你点击Toggle把visible改成false时，第一个Counter实例会被卸载，React会直接清理这个实例的所有状态；而第二个Counter实例从始至终都存在于DOM树中，它的状态自然会被完整保留下来，根本不存在“React要判断保留哪个count”的问题——因为两个count本来就属于不同的实例，互不关联。

再直白点说：React的状态是“跟着组件实例走”的，每个组件实例维护自己内部useState的调用顺序和状态值。只要组件实例没被卸载，它的状态就会一直保留；一旦组件被卸载，状态就会被回收。你示例里的第二个Counter从未被卸载过，所以它的count状态肯定不会丢，也不会和被卸载的第一个Counter的状态搞混。

内容的提问来源于stack exchange，提问作者OrthoPole