Comments 26
ведь теперь мы полностью продублировали код нашего превью в функции generatePlaceholder
Почему бы не использовать «renderToStaticMarkup»? Сам не пробовал, но вроде как у renderToStaticMarkup нет ограничений в использовании на клиенте.
Чтобы избавится от лишних перерисовок реализуем метод shouldComponentUpdate в GridDragLayer. Для плавности нам нужно обеспечить 60fps, т.е. одна перерисовка на 16 мс.
Возможные «залипания», когда компонент изменил свое состояние в интервале 16 мс, но не был перерисован, устраняются таймером и forceUpdate.
А что действительно нет возможности не перерисовывать весь GridDragLayer? Я правильно этому ужасаюсь, или «так и должно быть», «иначе не сделаешь»? Оно моргать не будет? А на планшетке? Я когда писал расписания с драгндропами с jquery-ui selectable/draggable/droppable (сотни объектов) никаких проблем с производительностью не имел и вообще не задумвывался о fps. Что-то я как то не готов морально к такому прогрессу. Ободрите, что все тут ok.
Кстати, чем не устроили свойства left и top? Неужели трансформации работают быстрее?
2. Если верить этой статье — www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft то да. Сам тесты не проводил.
Хм, а что сложного? Третий параметр component у beginDrag — это ваш компонент. Пишем что-то вроде <div ref={el => this.div = el}>
и можно обращаться к этому элементу как component.div
вместо placeholder
.
А как вы решаете эту проблему при создании плейсхолдера? Просто задаете ему начальную высоту при создании, которое происходит при начале перетаскивания, не так ли?
А ведь то же самое можно и с рефом сделать...
Хм, а в чем преимущества рендера в строку с последующим парсингом перед однократным вызовом ReactDOM.render
?
Не пробовали вместо
placeholder.innerHTML = ReactDOMServer.renderToStaticMarkup(<SubjectContent { ...item } />);
написать вот так:
ReactDOM.render(<SubjectContent { ...item } />, placeholder);
Не совсем понял из статьи и из комментариев, почему нельзя оптимизировать перерисовку компонента до обновления только свойств top
и left
(или transform
)?
Не вижу там shouldComponentUpdate
. Мне кажется, можно было бы реализовать его и проверять, изменились ли данные, возвращаемые monitor
(а предыдущие сохранять в стейте, например).
Или, как вариант, возвращать true
из shouldComponentUpdate
каждые 16мс.
forceUpdate
, как по мне, не выглядит правильным решением.
React, Drag&Drop и performance