У меня есть структура компонентов в приложении React, как показано на экране. Я использую перехватчики React, но это, вероятно, не очень актуально.
Компонент TabPage отображает список компонентов Plot на основе своего локального состояния, полученного от серверной части, в которой он имеет список графиков. идентификаторы.
В какой-то момент я хотел бы добавить элемент в список. Я отправляю запрос на добавление графика в базу данных, загружаю список идентификаторов графиков, расширенный на один элемент, до локального состояния TabPage. Состояние TabPage изменилось, поэтому компонент перерисовывается вместе с его потомками. Это приводит к потере локального состояния каждого из Plot компонентов и их потомков - в частности, PlotlyComponent, неуправляемого компонента из библиотеки Plot.ly JS, которая внутренне управляет, например, состоянием масштабирования диаграммы.
Вопрос: может ли элемент быть добавлен в список Plot в такой ситуации, не теряя локальный статус существующих участков и их потомков?
Я знаю, что было бы возможно перенести состояние всех этих компонентов и потомков Plot в TabPage, но тогда TabPage будет очень сложным, и у меня может возникнуть проблема с вытаскиванием состояния масштабирования PlotlyComponent и превращением его в управляемый компонент.
Я также знаю, что могу использовать useMemo и помню существующие компоненты Plot, но официально useMemo не следует использовать для управления поведением приложения, а только для того, чтобы избежать повторного рендеринга для оптимизации (в будущем useMemo может повторно визуализировать время от времени, например, в зависимости от количества доступной оперативной памяти).
* 1 027 *