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减少不必要的重渲染
