似乎使用 <style>
#messages{
height:300px;
overflow: auto;
}
</style>
通过聆听setState动画元素会产生非常不稳定的效果。
window.scrollY我最终使用const scrollY = window.scrollY;
animation01: {
transformY: (scrollY > breakPoint01) ? `translateY(200px)` : `translateY(0px)`,
},
的解决方案直接操作DOM以避免波动效应......
ref使用第一种解决方案时为何如此不稳定？这是在React中进行滚动动画的正确方法吗？
答案 0 :(得分：1)
一般来说 - 是，您应该使用ref来设置动画或更改样式属性，例如滚动，缩放等。原因是当您使用setState时每次滚动，缩放等时强制重新渲染组件。此外，这些事件每秒可以调用很多次，因此您可以想象为什么会出现波动效果。
但是，当你直接更改css组件时不会重新渲染 - 它只会在元素上改变样式，所以你的动画效果更加流畅。
修改
所以我决定创建一个小小的演示，说明在答案中的评论中提出的问题。
它的行为与更新组件的行为相同。您可以通过在console.log('updated')挂钩中插入componentDidUdpate来轻松检查 - 每次调用setState时，您都会看到updated消息。它虽然没有重新安装组件。