Блог

Главная - Вопросы по программированию - Что толку скрывать Модал, вместо того чтобы его отключать?

Что толку скрывать Модал, вместо того чтобы его отключать?

#javascript #reactjs #react-native

Вопрос:

Общий пример модального обычно выглядит так:

 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 amp;amp; (<Modal visible={true} onDismiss={hideModal} contentContainerStyle={containerStyle}>
      <Text>Example Modal.  Click outside this area to dismiss.</Text>
    </Modal>)

Есть ли какие-то плюсы или минусы в том, чтобы сделать это так или иначе? Есть ли какая-то особая или веская причина, по которой я должен сделать это первым(«официальным») способом?

Комментарии:

1. Может быть, анимация? Но да, мы обнаружили довольно значительный прирост производительности, не устанавливая ненужные модалы.

2. Анимация все еще работает.. вот это и есть самое странное.

Ответ №1:

Позвольте мне позаимствовать этот ответ jimfb на тот же вопрос в репо github react:

Скрытие с помощью CSS немного быстрее, но у него есть недостаток, который заключается в том, что ваше дерево dom/react больше, а это означает, что ваши согласования больше (медленнее), и ваше приложение использует больше памяти — даже когда дерево не видно. Если вы не можете определить разницу между ними с точки зрения производительности, мы бы рекомендовали размонтировать (с тех пор вы очищаете свою память и сохраняете свое дерево небольшим).

Метки: ,