为什么状态在同一类型的两个组件之间共享

Question

我有一个简单的React应用程序，其中我根据布尔变量的值有条件地呈现同一组件的两个实例：

export default function App() {
const [showFirst, setShowFirst] = useState(true);
return (
<div>
<button type="button" onClick={() => setShowFirst(show => !show)}>
Switch between components
</button>
{showFirst ? (
<SomeComponent text="I am the first" />
) : (
<SomeComponent text="I am the second" />
)}
</div>
);
}

这个组件有内部状态：我在这个组件内点击鼠标增加一个计数器：

class SomeComponent extends React.Component {
state = {
count: 0
};
componentDidMount() {
console.log("mounted");
}
componentWillUnmount() {
console.log("unmounting");
}
render() {
return (
<div
style={{
display: "flex",
flexDirection: "column",
border: "2px solid green",
padding: 8
}}
>
{this.props.text}
<button
onClick={() =>
this.setState(({ count }) => ({
count: count + 1
}))
}
>
increase counter
</button>
{this.state.count}
</div>
);
}
}

我希望SomeComponent中的"count"状态变量在这两个组件中有两个不同的值，但它们共享状态。为什么？

这里有一个现场演示来说明我的观点。

Answer 1

您需要添加key道具来让react知道它是一个不同的实例，请参阅您的分叉示例

https://stackblitz.com/edit/react-g7a6vr?file=src/App.js

官方文件完美地阐明了这一点：

键帮助React识别哪些项目已更改、已添加或正在已删除。键应该提供给数组中的元素元素具有稳定的身份。