Блог

При использовании модального компонента Material-UI (или любого из компонентов, созданных с его использованием), есть ли какая-либо выгода в использовании open prop по сравнению с условным удалением компонента? Я заметил, что вы теряете приятный завершающий переход, но есть ли какое-либо преимущество в производительности, если существует много модалов?

Пример использования open реквизита:

     const [openModal, setOpenModal] = React.useState(false);

    return (
        /* code to set openModal to true */
        <Modal open={openModal} onClose={() => setOpenModal(false)}>modal stuff here...</Modal>
    );
 

Пример использования условного рендеринга:

     const [openModal, setOpenModal] = React.useState(false);

    return (
        /* code to set openModal to true */
        {
            openModal amp;amp;
                <Modal open onClose={() => setOpenModal(false)}>modal stuff here...</Modal>
        }
    );
 

Я думаю, что второй подход может быть менее эффективным, если вы посмотрите модальный компонент исходного кода, Вы можете увидеть много инициализация происходит в коде, useEffects и некоторые другие вещи, которые каждый раз вы условно отобразить модальный, он будет установлен снова в дом, в то время как если вы держите в открытое состояние контролируется модальные себя компонент не будет установлен снова, по крайней мере, не инициализация и оно будет более эффективным, ИМО. Я предлагаю вам прочитать исходный код, но для меня всегда что-то перерисовывать и монтировать было бы менее эффективно.