Рендеринг всех возможных элементов или рендеринг по запросу

Таким образом, у меня есть приложение, которое имеет правую боковую панель, видимость которой переключается с помощью кнопки. В этой боковой панели может быть одна из нескольких вещей [одновременно] — чат, Помощь, Поиск. Я смотрел на некоторые простые HTML из приложений, которые имеют аналогичную функцию, и заметил, что у них все узлы визуализированы, но просто скрыты через CSS.

Поскольку мне нужно сделать то же самое, я подумал, будет ли это хорошей идеей сделать с React. Но затем я понял, что элементы React имеют состояние, которое при обновлении вызывает метод render. Таким образом, я могу использовать состояние для хранения как того, открыта ли боковая панель, так и того, что находится внутри боковой панели.

Это что, способ реагирования? Лучше ли, чтобы все узлы отображались, даже если они не видны, или лучше, чтобы узлы отображались по запросу через изменения состояния?

1 ответ

  1. Я чувствую, что только визуализация того, что видно, будет более стандартным способом реагирования, но в этом случае это в основном решение о производительности. Если вы отрисовываете все и просто переключаете видимость с помощью CSS, первая отрисовка займет больше времени (но разница во времени может быть не актуальной или даже заметной). Если вы визуализируете только видимую часть, React должен выполнять небольшой повторный вызов при каждом изменении содержимого боковой панели. (Это также может быть не заметно время.)

    Моя рекомендация была бы попробовать оба, если вы хотите проверить производительность. Но я думаю, что вы не ошибетесь в любом случае.