react hooks 监听better scroll 渲染延迟
来源：3-6 歌手列表固定标题实现（下）
诺巴蒂
2022-05-31
过程：
1、betterScroll onScroll 的时候监听 y 轴变化，赋值给变量 scrollY
2.用 useEffect 监听 scrollY 的变化，计算新的 fixedStyle 值
3.页面用新的 fixedStyle 值渲染
但是这样，渲染时候会有一些延迟，导致迅速滑动的时候有点不符合预期（位置会有1像素左右偏差，仔细能看出来）
原因我觉得是：
- onScroll 变化的时候，通过 setScrollY 赋值，造成了一次渲染，但是此时还是旧的fixedStyle 值
- useEffect 发现 setScrollY 变化，计算新的 fixedStyle ，并通过 setFixedStyle 造成第二次渲染，将新的值渲染到页面
这样至少造成一次渲染浪费，本来正常渲染就有会延迟（监听 onScroll变化的时候已经滚动完成了，再计算setFixedStyle 渲染到页面，就会有一些延迟），再多浪费一次渲染，延迟就更明显了，所以效果会有一点不符合预期，这个有什么办法吗？
是不是直接 ref dom 操作更好一些
写回答
1回答
-
对 react 不太了解，不过一般来说不应该多次渲染，react 也不会性能也会有多差。可以参考 react 的 better-scroll demo: https://github.com/ustbhuangyi/better-scroll/tree/dev/packages/react-examples
012022-06-03
相似问题