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

它的行为与您更新组件的行为相同。您可以通过在钩子中插入console.log('updated')componentDidUdpate轻松检查它 - 每次调用setState您都会看到updated消息。不过，它不会重新安装组件。