隐藏模态而不是卸载它有什么好处？

Question

modal的常见例子通常是这样的:

import * as React from 'react';
import { Modal, Portal, Text, Button, Provider } from 'react-native-paper';
const MyComponent = () => {
const [visible, setVisible] = React.useState(false);
const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);
const containerStyle = {backgroundColor: 'white', padding: 20};
return (
<Provider>
<Portal>
<Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
<Text>Example Modal.  Click outside this area to dismiss.</Text>
</Modal>
</Portal>
<Button style={{marginTop: 30}} onPress={showModal}>
Show
</Button>
</Provider>
);
};
export default MyComponent;

我的问题是……为什么这是推荐的用法，而不是在不再需要组件时卸载组件?像这样:

visible && (<Modal visible={true} onDismiss={hideModal} contentContainerStyle={containerStyle}>
<Text>Example Modal.  Click outside this area to dismiss.</Text>
</Modal>)

这样或那样做有什么利弊吗?我必须用第一种("官方的")方式来做这件事，有什么特别的或者很好的理由吗?

Answer 1

让我借用jimfb对github repo上react的相同问题的回答:

通过CSS隐藏稍微快一点，但它有缺点，它意味着你的dom/react树更大，这意味着你的调和更大(更慢)，你的应用程序使用更多的内存-即使树是不可见的。如果在性能方面无法区分这两者之间的区别，我们建议卸载(因为这样您将清理内存并保持树较小)。