浏览器中有多种树，DOM 树 描述 HTML，CSSDOM 描述 CSS 树。甚至还有Accessibility Tree 描述易用性。

相同位置的同样组件会保留状态

例如

function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (<div>
    {isFancy ? <Counter isFancy={true} /> : <Counter isFancy={false} /> }
  </div>);
}

Counter 不会因为单独的声明而重置，而是会保持其当前状态。甚至于，如果 fiber 树保持不变的情况下，相同位置的组件也会保持状态。如果想要在重绘时保持状态，应该尽量保持 Fiber 树的结构不变。

所以不能嵌套声明函数组件，因为每次都是不同的组件，虽然声明相同。

不同位置的组件会重置状态

function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (<div>
    {isFancy && <Counter isFancy={true} />} 
    {!isFancy && <Counter isFancy={false} /> }
  </div>);
}

这样的代码因为组件位置不同，会导致它状态重置。

不同 key 的组件会重置状态

function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (<div>
    {isFancy ? <Counter key="fancy" isFancy={true} /> : <Counter key="no_fancy" isFancy={false} /> }
  </div>);
}

key 是组件位置的一部分，因为不同的 key，React 会重置状态。