由useEffect重新渲染后，React页面滚动在顶部

当通过 useEffect 函数重新渲染 React 页面时，页面滚动位置将会回到顶部。

useEffect 是 React 提供的一个副作用钩子，用于处理组件中的副作用操作，比如订阅事件、数据获取等。它在每次渲染结束后执行，包括组件的初次渲染和每次更新渲染。

当在 useEffect 中执行一些操作会导致组件重新渲染时，例如修改了依赖项数组（dependencies），React 将重新渲染组件，并且由于重新渲染，页面的滚动位置将重置为顶部。

这种行为对于大多数场景是有益的，因为在组件重新渲染后，用户通常希望页面的滚动位置回到最上方。然而，如果你希望在页面滚动后保持滚动位置不变，可以通过以下方式实现：

使用 useRef 钩子保存滚动位置：

import { useEffect, useRef } from 'react';

function MyComponent() {
  const scrollRef = useRef();

  useEffect(() => {
    if (scrollRef.current) {
      window.scrollTo(0, scrollRef.current);
    }
  }, []);

  useEffect(() => {
    scrollRef.current = window.pageYOffset;
  });

  return (
    // your component JSX
  );
}

在上述代码中，我们使用 useRef 创建了一个 ref，用于保存滚动位置。在组件每次渲染时，都会更新 ref 中的值为当前页面的滚动位置。然后，在 useEffect 中通过 window.scrollTo 方法将滚动位置恢复为之前保存的值。

使用 scrollTo 方法并结合滚动事件进行处理：

import { useEffect, useState } from 'react';

function MyComponent() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    window.scrollTo(0, scrollPosition);
  }, [scrollPosition]);

  useEffect(() => {
    const handleScroll = () => {
      setScrollPosition(window.pageYOffset);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    // your component JSX
  );
}

在上述代码中，我们使用 useState 创建了一个状态变量 scrollPosition，用于保存滚动位置。在每次滚动事件触发时，都会更新 scrollPosition 的值。然后，在 useEffect 中监听滚动事件，并通过 window.scrollTo 方法将滚动位置恢复为 scrollPosition 的值。

总结起来，当使用 useEffect 重新渲染 React 页面后，页面滚动位置会回到顶部。如果需要在重新渲染后保持滚动位置不变，可以利用 useRef 或 useState 结合 scrollTo 方法进行处理。