Анимация прокрутки React с setState прерывистая
Похоже, использование setState для анимации элементов при прослушивании window.scrollY даст очень прерывистый эффект.
const scrollY = window.scrollY;
animation01: {
transformY: (scrollY > breakPoint01) ? `translateY(200px)` : `translateY(0px)`,
},
Я закончил с решением ref для непосредственного управления DOM, чтобы избежать эффекта изменчивости ...
const breakPoint00 = 1250
const breakPoint01 = breakPoint00 + 230
const animation01 = ReactDOM.findDOMNode(this.animation01)
if (scrollY > breakPoint00) {
animation01.style.transform = `translateY(0px)`
} else (scrollY > breakPoint01) {
animation01.style.transform = `translateY(200px)`
}
Почему при использовании первого раствора он такой неустойчивый? Это правильный способ делать анимацию прокрутки в React?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вообще говоря - да, вы должны использовать ref для анимации или изменения свойств стиля с помощью таких событий, как прокрутка, масштабирование и т.д. вызывается много-много раз в секунду, поэтому вы можете представить, почему вы получаете эффекты изменчивый.
Однако, когда вы изменяете css напрямую, компонент не перерисовывается - он меняет только стиль прямо на элементе, поэтому эффект анимации становится более плавным.
РЕДАКТИРОВАТЬ
Поэтому я решил создать небольшую демонстрацию, которая иллюстрирует то, что было задано в комментариях под ответом.
Вот jsfiddle маленькая демонстрация
Он ведет себя так, как если бы вы обновляли компонент. Вы можете легко проверить это, вставив setState в ловушку console.info('updated') - каждый раз, когда вы вызываете componentDidUdpate, вы будете видеть сообщение setState. Однако это не компонент переходит.
@TzuYuanLiu Я обновил свой ответ. Надеюсь, демонстрация поможет вам лучше понять, что происходит при вызове setState.
Спасибо за объяснение! Вы имеете в виду компоненты
unmountиmountснова и снова, когда речь идет о рендеринге компонента? Или это просто сравнение с виртуальной DOM и обновление определенного узла?