React.js 防止重新渲染后滚动到顶部

Question

这是对上一个问题的扩展，询问如何防止在按状态更改（排序状态）重新渲染后滚动到顶部

我使用useState和useEffect编写了自动排序表。

我在codesandbox上的代码每3秒从API服务器获取具有2种不同状态（A和B状态）的随机数。

然后按状态标记为表格，排序为AB。

但是，在每次重新渲染时，窗口都会滚动到顶部。

问题是，如何防止滚动到顶部？

在上一个问题中，我尝试了如下所示的useLayoutEffect 。

 useEffect(() => {
    const updatePosition = () => {
      setCurrentScrollY(window.scrollY);
    };
    window.addEventListener("scroll", updatePosition);
    updatePosition();
    return () => window.removeEventListener("scroll", updatePosition);
  }, []);

  useLayoutEffect(() => {
    window.scrollTo(0, currentScrollY);
  }, [commonKey]);

当我像上面的代码和框代码一样每 3 秒使用REST API请求时，它似乎工作得很好。

但是Websocket会导致连续的状态变化，导致滚动不稳定。

看来Websocket连接正在导致严重的状态变化，从而导致严重的重新渲染。

如何防止重新渲染时滚动到顶部而不出现滚动断断续续的情况？

ps 抱歉我的英语不好。

Answer 1

这是由浏览器引起的，而不是 React。整个表正在重新渲染。列的宽度和高度（尤其是标题中）正在调整大小。当 时window.scrollY > 0，浏览器没有参考点来保留滚动位置，而不会显得位置没有改变，因为它不知道您正在查看哪个像素，因此不知道滚动位置改变了多少您所看到的内容与文档顶部之间的距离已发生变化。所以它做了它能做的仅有的两件事之一：滚动到顶部。

浏览器可以做（但没有做）的另一件事是：

const scrollX = window.scrollX;
const scrollY = window.scrollY;

useLayoutEffect(() => {
  window.scrollTo(scrollX, scrollY);
});

我稍微清理了你的代码并添加了上面的代码片段。