El ejemplo común de modal suele ser así:
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;Mi pregunta es. ¿Por qué es este el uso recomendado en lugar de simplemente desmontar el componente cuando ya no se necesita? Algo como esto:
visible && (<Modal visible={true} onDismiss={hideModal} contentContainerStyle={containerStyle}> <Text>Example Modal. Click outside this area to dismiss.</Text> </Modal>)¿Hay algún pro o contra de hacerlo de una forma u otra? ¿Hay alguna razón particular o buena por la que deba hacerlo de la primera manera ("oficial")?
Permítanme tomar prestada esta respuesta de jimfb a la misma pregunta en el repositorio de github de react:
Ocultar a través de CSS es un poco más rápido, pero tiene la desventaja de que significa que su árbol dom/react es más grande, lo que significa que sus conciliaciones son más grandes (más lentas) y su aplicación usa más memoria, incluso cuando el árbol no está visible. Si no puede notar la diferencia entre los dos, en términos de rendimiento, le recomendamos que los desmonte (ya que entonces está limpiando su memoria y manteniendo su árbol pequeño).