条件渲染时除CSS display:none外如何避免组件重新挂载

核心原因是当前使用的三目运算符互斥分支会触发React的Diff算法删除原有组件节点，导致组件卸载，加载结束后新建节点触发重挂载。以下是几种不依赖display: none的实现方案：

• 使用蒙层方案覆盖原有组件
  永远渲染业务组件，加载状态时将加载蒙层通过绝对定位覆盖在业务组件上方，不需要隐藏原有组件，完全避免组件销毁逻辑，是多数UI组件库加载状态的标准实现。
  示例代码：

  const App = () => {  
    const [isLoading, setIsLoading] = useState(false);  
    const toggle = async () => {    
      setIsLoading(true);    
      await new Promise((resolve) => setTimeout(resolve, 1500));    
      setIsLoading(false);  
    };  
    return (    
      <div className="App">      
        <button onClick={toggle}>Toggle Loading</button>
        <div style={{ position: 'relative' }}>
          <Component />
          {isLoading && (
            <div style={{
              position: 'absolute',
              inset: 0,
              background: '#fff',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}>
              Loading...
            </div>
          )}
        </div>
      </div>  
    );
  }
  
  const Component = () => {  
    useEffect(() => {    
      console.log("Component mounted.");    
      return () => console.log("Component unmounted.");  
    }, []);  
    return <div>Component</div>;
  };
  

• 使用其他CSS属性控制显隐
  可以用visibility: hidden或者opacity: 0隐藏组件，这两个属性不会触发组件卸载，如果不需要保留元素占位，搭配position: absolute脱离文档流即可，效果和display: none一致但不会影响元素的生命周期。
• 状态提升
  将业务组件内部的校验等状态提升到父组件或者全局状态库（Redux、Zustand等）存储，即使组件被卸载，下次挂载时将存储的状态回传给组件即可恢复原有状态，不需要修改渲染逻辑。
• 组件缓存方案
  可以使用react-activation等React缓存库，或者自行实现组件缓存逻辑，将组件实例缓存下来，条件渲染时不会销毁实例，自然不会触发重挂载，适合多Tab切换等需要大量组件缓存的场景。

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