javascript - 带有 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 您每次滚动、缩放等时都强制重新渲染组件。此外，这些事件每秒可以调用多次，因此您可以想象为什么会出现断断续续效果。 p>

但是，当您直接更改 css 时，组件不会重新渲染 - 它只会更改元素上的样式，因此您的动画效果更加流畅。

编辑

所以我决定创建一个小演示来说明在答案下方的评论中提出的问题。

这里是 jsfiddle little demo

它的行为就像更新组件一样。您可以通过在 componentDidUdpate Hook 中插入 console.log('updated') 轻松检查它 - 每次调用 setState 时，您都会看到 更新消息。不过，它不会重新挂载组件。