通过更改组件在 UI 树中的位置来重置 ReactJs 中组件的状态答案

【问题标题】：Resetting state of a component in ReactJs by changing its position in the UI tree通过更改组件在 UI 树中的位置来重置 ReactJs 中组件的状态
【发布时间】：2023-02-03 19:17:41
【问题描述】：

只要您在同一位置渲染同一组件，React 就会一直保持状态

在这个例子中，我渲染 2柜台组件，通过选中复选框，我控制显示/隐藏第一个柜台成分。

export default function App() {
  const [showA, setShowA] = useState(true);
  return (
    <div>
       {showA && <Counter />} 
      <Counter />
      <label>
        <input
          type="checkbox"
          checked={showA}
          onChange={e => {
            setShowA(e.target.checked)
          }}
        />
        Render the first counter
      </label>
    </div>
  );
}

根据文档，** React 根据它们在 UI 树中的位置跟踪哪个状态属于哪个组件。您可以控制何时保留状态以及何时在重新渲染之间重置状态。**

所以当我隐藏/然后显示第一个计数器时，它的状态被重置，问题是，通过隐藏和显示第一个计数器，我们正在改变第二个计数器的位置，但它的状态没有被重置，任何帮助为什么？

我预计，由于第二个组件的位置发生变化，因此它的状态也会重置，但这并没有发生

【问题讨论】：

当文档说“位置”时，它们是指元素树中的位置，而不是屏幕上的“视觉”位置。
我知道，它们不是指在 JSX 中的位置，而是通过删除第一个计数器，第二个计数器变成第一个，这实际上是在改变树中的位置

标签： javascript reactjs state

【解决方案1】：

second counter's 状态未重置的原因是组件仍在同一位置呈现。

当您切换 first counter 的可见性时，反应更新UI tree，但第二个计数器保持在相同位置。由于未卸载第二个计数器，因此保留了它的状态。

反应使用一种称为协调的技术来更新UI tree并优化性能。当您切换第一个计数器的可见性时，反应比较old UI tree to the new UI tree，它只更新树中发生变化的部分。第二个计数器组件保持不变，所以它的状态没有被重置。

总之，状态持久性反应取决于在UI tree 中相同位置呈现的组件。如果一个组件被卸载，它的状态就会丢失。然而，如果一个组件保持在相同的位置，它的状态将在重新渲染之间被保留。

【讨论】：