useVirtualList 数据抖动

[MarksJin]

使用 useVirtualList 按照官网的案例，滚动时列数据会剧烈滚动

https://user-images.githubusercontent.com/16314366/167578256-1321465b-cd34-40a1-a562-437e8b588d53.mp4

[brickspert]

复现不了：https://codesandbox.io/s/ijpcvt?file=/App.tsx

[brickspert]

无法复现，暂时关了哈。

[pule-dpr]

@brickspert react18.1.0 可以复现

[pule-dpr]

@brickspert https://codesandbox.io/s/default-usage-forked-xidyxw?file=/index.tsx 往下滚动一点就可以，区别时用的root.render()

[github-actions[bot]]

Hello @MarksJin. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @MarksJin，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[Easy-Martin]

页面内容高度发生变化引起滚动条跳动的问题。浏览器会自动触发onscroll事件，调整滚动条的位置，让滚动条不乱跳动 ; 懒加载的时候由于不断更新列表项内部的高度，因此就会使浏览器自动触发滚动事件，而滚动事件又触发懒加载的更新，形成死循环，造成自动滚动的问题。在父元素中添加样式overflow-anchor:none就正常了。不知道为啥只有react18，root.render()方式才会有问题

[cbingrui]

添加overflow-anchor:none没有明显跳动，但细看，从25后面开始的数字每滚动切换一个，数字都会抖动几十毫秒后才恢复正常。在react18，root.render()能重现

[coder-lcn]

似乎是性能问题 @MarksJin ，你的电脑配置是啥？我观察了一下，当 wrapper.style.marginTop 开始为非 0 的值时，就开始卡或者抖动了

[yfs-2000]

只有react 18 会发生这个问题 在react17上面是好的 希望可以给出原因 困扰了我很久

[yfs-2000]

而且你们将key删除 这个现象神奇的消失了

[ClenLu]

这个问题怎么样了？？

[crazylxr]

@hchlq @miracles1919 你们这问题可以复现吗？

[Easy-Martin]

@hchlq 仅在React18下，通过ReactDOMClient.createRoot(ele).render方式出现 codesandbox 复现，列表往下面滚

[crazylxr]

@hchlq 仅在React18下，通过ReactDOMClient.createRoot(ele).render方式出现 codesandbox 复现，列表往下面滚

好的，感谢。这个 demo 可以复现

[kaiwenxiao]

有人在继续跟进这个问题吗？

[crazylxr]

有人在继续跟进这个问题吗？

你也是在 react 18 下遇到这个问题了吗？

[hchlq]

@brickspert @crazylxr @miracles1919 @li-jia-nan 一起看下呢，感觉这个很诡异，可能和 React18 某些 break change 有关

[hchlq]

去掉 key 之后正常了我是没想到的 😂

[hchlq]

目前的表现是：在 React18 中，当列表超过 overscan 的时候，即 wrapper.style.marginTop 大于 0 时， 会执行两次 calculateRange，第二次执行的时候会把前一次的 offsetTop 进行计算，导致的抖动问题 https://codesandbox.io/s/default-usage-forked-geyb23?file=/useVirtualList.ts:2847-2861