React是否有类似Flutter中GlobalKey的机制，可在不同DOM层级移动子元素？

你遇到的跨DOM层级移动子元素丢失状态的问题，本质是React的diff算法默认通过「同层级元素的类型 + key属性」判定是否为同一个组件实例，一旦判定不匹配，就会直接卸载旧实例、挂载新实例，原有状态自然会被清空。你给出的示例组件本身就可以实现子元素状态保留，只要传入的children是同一个React元素实例即可。

React没有提供和Flutter GlobalKey完全对等的、可以全局唯一识别组件实例的API，但有几种成熟的方案可以实现完全相同的效果：

• 方案1：保持子元素实例引用不变
  提前创建需要保留状态的子组件实例，保证它的引用在渲染切换时不会变化，不管你把它嵌套在多少层DOM节点下，React都会识别为同一个组件实例，全程保留状态。
  完整示例代码：

  import { useState } from 'react';
  
  // 你给出的示例组件
  function Wrapper({children, someFlag}:{children:React.ReactNode, someFlag:boolean}){
    return someFlag?<div><div>{children}</div></div>:<div>{children}</div>;
  }
  
  // 测试用的带状态的子组件
  function Counter() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(prev => prev + 1)}>计数：{count}</button>
  }
  
  function Parent() {
    const [someFlag, setSomeFlag] = useState(false);
    // 提前创建子组件实例，保持引用全程不变
    const persistentChild = <Counter />;
  
    return (
      <div>
        <button onClick={() => setSomeFlag(prev => !prev)}>切换DOM结构</button>
        <Wrapper someFlag={someFlag}>
          {persistentChild}
        </Wrapper>
      </div>
    )
  }
  

• 方案2：给不同分支的同个组件添加相同的key
  如果你无法提前创建子元素实例，需要在两个渲染分支里分别声明同个组件，只要给两个分支里的组件设置完全相同的key值，React diff时就会判定为同一个实例，不会触发卸载重建，状态也会保留。
• 方案3：使用Portal实现跨任意DOM节点移动
  如果你的场景是需要把组件移动到完全不相关的DOM节点下（比如弹窗、悬浮工具类组件），可以使用React原生的createPortalAPI，它可以把组件渲染到任意指定的DOM节点中，但组件在React虚拟DOM树中的层级保持不变，所以实例不会被销毁，状态可以完全保留。

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