Реагирующая анимация прокрутки с помощью setState изменчива

Question

Кажется, использование 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?

Answer 1

Вообще говоря - Да , вы должны использовать ref для анимации или изменения свойств стиля с помощью таких событий, как прокрутка, масштабирование и т. Д. Причина в том, что когда вы используете setState, вы заставляете каждый раз перерисовывать компонентвремя прокрутки, масштабирования и т. д. Кроме того, эти события можно вызывать много раз в секунду, поэтому вы можете себе представить, почему вы получаете прерывистый эффект.

Однако при изменении компонента css напрямуюне рендерится - он только меняет стиль прямо на элементе, поэтому эффект анимации более плавный.

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

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

Вот jsfiddle little demo

Он ведет себя так, как если бы вы обновляли компонент.Вы можете легко проверить это, вставив console.log('updated') в componentDidUdpate hook - каждый раз, когда вы вызываете setState, вы увидите updated сообщение.Это не перемонтирует компонент, хотя.