我正在try 使用React 16封装一个<；Drawer/>；和<；modal/>；组件.我引用了一些项目，现在我有两种方法.哪一个更好？
在这种情况下，由于父组件中的可见性状态发生了更改，如果父组件具有大量计算逻辑，则使用<；modal/>；组件的开发人员将需要付出额外的努力来解决性能问题.
const [visible, setVisible] = useState<boolean>(false);
// Parent
return <>
<Button onClick={() => {
setVisible(true);
}}>Open Modal</Button>
// Children
<Modal visible={visible} />
</>;
或使用Ref:
// Children
const [visible, setVisible] = useState<boolean>(false);
React.useImperativeHandle(ref, () => {
open: () => { setVisible(true) },
close: () => { setVisible(false) },
})
return <div>
{props.visible && children}
</div>;
// Parent
const ModalRef = useRef<{ open: () => void; close: () => void } | null>(null);
return <>
<Button onClick={() => {
ModalRef.current.open();
}}>Open Modal</Button>
<Modal ref={ModalRef} />
</>;
在本例中，我不必要地操作了对DOM的引用，并且这种类型的组件不会频繁销毁.该REF可能会在浏览器中与父对象保持很长时间.这样做的好处是开发人员不再需要在父组件中管理其状态.