react如何隐藏组件

隐藏组件的常见方法

条件渲染 通过状态或props控制组件是否渲染。使用逻辑运算符（如&&）或三元表达式实现：

{isVisible && <Component />}
// 或
{isVisible ? <Component /> : null}

CSS隐藏 通过样式控制可见性，保留DOM结构但隐藏显示：

<div style={{ display: isVisible ? 'block' : 'none' }}>
  <Component />
</div>

HOC封装 使用高阶组件动态控制渲染：

const withVisibility = (WrappedComponent) => (props) => {
  return props.isVisible ? <WrappedComponent {...props} /> : null;
};

Portal隐藏 将组件渲染到DOM其他位置（如document.body）并配合样式控制：

ReactDOM.createPortal(
  <Component />,
  document.body
);

性能优化建议

• 频繁切换显示时优先使用CSS方案避免组件卸载/挂载开销
• 需要保留组件状态时避免条件渲染导致内部状态丢失
• 大型组件隐藏时可配合React.memo减少不必要的重渲染