做教育培训的网站大宗商品价格查询网站

相同位置的相同组件会使得 state 被保留下来

当你勾选或清空复选框的时候，计数器 state 并没有被重置。不管 isFancy 是 true 还是 false，根组件 App 返回的 div 的第一个子组件都是 <Counter />：


你可能以为当你勾选复选框的时候 state 会被重置，但它并没有！这是因为 两个 标签被渲染在了相同的位置。 React 不知道你的函数里是如何进行条件判断的，它只会“看到”你返回的树。在这两种情况下，App 组件都会返回一个包裹着 作为第一个子组件的 div。这就是 React 认为它们是 同一个 的原因。

你可以认为它们有相同的“地址”：根组件的第一个子组件的第一个子组件。不管你的逻辑是怎么组织的，这就是 React 在前后两次渲染之间将它们进行匹配的方式。

相同位置的不同组件会使 state 重置

在相同位置重置 state

• 方法一：将组件渲染在不同的位置
  

• 方法二：使用 key 来重置 state
  
  https://react.docschina.org/learn/preserving-and-resetting-state#option-1-rendering-a-component-in-different-positions