使用setState的React滚动动画是不连贯的

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 小演示

它的行为就像更新组件一样。您可以通过插入console.log('updated')内部componentDidUdpate钩子轻松检查它 - 每次调用时setState您都会看到updated消息。但它不会重新安装组件。