React封装Drawer/Modal：受控visible属性vs Ref调用方法哪种更优？

数据老陈

2026-7-16

方案一：父组件管理可见性状态

核心逻辑：弹窗的显示/隐藏状态由父组件维护，通过 visible 属性传递给子组件，子组件根据该属性渲染内容
潜在问题：若父组件包含大量计算逻辑，修改 visible 触发父组件重渲染时，可能带来额外性能开销，需要开发者自行做优化处理

const [visible, setVisible] = useState<boolean>(false);

// 父组件
return <>
    <Button onClick={() => {
        setVisible(true);
    }}>Open Modal</Button>

    // 子组件
    <Modal visible={visible} />
</>;

方案二：通过 Ref 调用子组件方法

核心逻辑：子组件内部维护可见性状态，通过 useImperativeHandle 暴露 open/close 方法，父组件通过 Ref 调用这些方法控制弹窗显示/隐藏
潜在问题：依赖 Ref 操作子组件内部逻辑，违背 React 声明式编程的设计理念；若组件长期不销毁，Ref 会随父组件长期驻留，虽一般不会引发内存泄漏，但会增加不必要的组件耦合

// 子组件
const [visible, setVisible] = useState<boolean>(false);

React.useImperativeHandle(ref, () => ({
    open: () => { setVisible(true) },
    close: () => { setVisible(false) },
}))

return <div>
    {visible && children}
</div>;

// 父组件
const ModalRef = useRef<{ open: () => void; close: () => void } | null>(null);

return <>
    <Button onClick={() => {
        ModalRef.current?.open();
    }}>Open Modal</Button>

    <Modal ref={ModalRef} />
</>;

选型建议

优先选择方案一
- 完全符合 React 单向数据流、声明式编程的核心原则，状态流转清晰，便于后续调试和维护
- 性能问题可通过 React 内置手段解决：比如给 Modal/Drawer 组件包裹 React.memo，避免父组件重渲染时子组件无意义更新；或拆分父组件中与弹窗无关的逻辑到独立组件，缩小重渲染范围
方案二的适用场景
- 当弹窗的显示/隐藏逻辑完全独立于父组件状态，且父组件无需感知弹窗状态时，可考虑使用
- 需注意避免过度依赖 Ref，它会破坏组件封装性，提升代码耦合度