Как сохранить экземпляр компонента при перемещении его на другой родительский компонент в реагировать?

Как сохранить экземпляр компонента при перемещении его в другой родительский компонент в реакции?

Что вы хотите сохранить? Является ли это объектами Javascript, которые компонент содержит в качестве состояния, или это состояние в DOM (например, как долго воспроизводилось видео или выбор текста в поле ввода)?

Если это просто объекты Javascript в качестве состояния, вам лучше переместить источник этого состояния в другой сервис (что-то вроде Flux). Таким образом, не имеет значения, будет ли компонент воссоздан, потому что он может быть воссоздан с состоянием, которое было там ранее.

РЕДАКТИРОВАТЬ

Чтобы ваш код представления был простым и понятным, не сохраняйте состояние внутри ваших компонентов. Вместо этого все данные, которые нужны компоненту, должны быть переданы в компонент в качестве реквизита. Таким образом, компонент является «чистым» в том смысле, что он выдает один и тот же результат при одинаковых опорах. Это также делает проблему повторного использования экземпляра компонента без проблем, поскольку не имеет значения, когда один и тот же вход дает одинаковый вывод.

Для перетаскивания, я бы предложил посмотреть: https://github.com/gaearon/react-dnd .

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

ВТОРОЕ РЕДАКТИРОВАНИЕ

Относительно того, есть ли у вас поддерево с сотнями компонентов, которые вы хотите переместить: я бы по-прежнему начинал с того, что сделал состояние внешним (чистые компоненты), и отобразил бы это дерево в новом месте. Это означает, что React, вероятно, воссоздает все это поддерево, что нормально. Я не отклонился бы от этого пути, если бы его исполнение не оказалось ужасным (просто предположить, что это может быть ужасно, недостаточно).

Если бы производительность оказалась ужасной, я бы обернул все это поддерево в компонент, который кэширует фактическое дерево DOM и использует его повторно (если оно проходит те же операции). Но вы должны делать это только тогда, когда это абсолютно необходимо, поскольку это противоречит тому, что React пытается сделать для вас.

Третье редактирование

О жестах: я бы начал с прослушивания событий жестов в componentDidMount , а также при вызове обратного вызова события setState для компонента с координатами, которые он должен иметь. И затем визуализировать компонент в render с заданными координатами. React не будет воссоздавать компонент, когда вы вызываете setState но будет перерисовывать его (и выводить результаты). Если единственное, что вы изменили, — это координаты, то оно должно отображаться достаточно быстро.

Если это окажется слишком медленным, например, если поддерево этого компонента огромно, и оно становится узким местом для воссоздания поддерева vDOM, я бы переместил узел DOM непосредственно в цикл RAF вне элемента управления Reacts. И я также добавил бы огромный комментарий о том, зачем это нужно, потому что это может показаться странным для какого-то другого разработчика позже.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector