要在页面顶部滚动的类组件内的useEffect

useEffect 是 React 中的一个 Hook，它允许你在函数组件内执行副作用操作，如数据获取、订阅或手动更改 DOM 等。当组件挂载、更新或卸载时，useEffect 都会被调用。

基础概念

• 组件挂载：组件首次渲染到 DOM 中。
• 组件更新：组件的 props 或 state 发生变化，导致重新渲染。
• 组件卸载：组件从 DOM 中移除。

相关优势

1. 简化生命周期管理：useEffect 把组件挂载后、更新时及卸载前的操作统一到一个 API 中管理。
2. 避免类组件的样板代码：函数组件配合 Hooks 可以减少类组件中繁琐的生命周期方法。

类型

• 组件挂载和更新时执行：默认情况下，useEffect 在每次组件渲染后都会执行。
• 仅在组件挂载和卸载时执行：通过返回一个清理函数，可以在组件卸载时执行特定操作。

应用场景

• 数据获取：在组件挂载后获取远程数据。
• 订阅和取消订阅：如监听窗口大小变化，组件卸载时取消订阅。
• 手动更改 DOM：如滚动到页面顶部。

示例代码

假设我们有一个类组件，需要在每次组件更新后滚动到页面顶部：

import React, { useEffect } from 'react';

class ScrollToTop extends React.Component {
  componentDidMount() {
    window.scrollTo(0, 0);
  }

  componentDidUpdate() {
    window.scrollTo(0, 0);
  }

  render() {
    return this.props.children;
  }
}

export default ScrollToTop;

使用 useEffect 改写为函数组件：

import React, { useEffect } from 'react';

function ScrollToTop({ children }) {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []); // 空依赖数组确保只在组件挂载和卸载时执行

  return children;
}

export default ScrollToTop;

遇到的问题及解决方法

问题：页面滚动行为不符合预期，可能是因为 useEffect 在每次渲染后都执行了滚动操作。

原因：默认情况下，useEffect 会在每次组件渲染后执行，包括初始渲染和后续的每次更新。

解决方法：通过传递一个空数组 [] 作为 useEffect 的第二个参数，可以确保该副作用仅在组件挂载和卸载时执行一次。

useEffect(() => {
  window.scrollTo(0, 0);
}, []); // 只在组件挂载和卸载时执行

这样修改后，滚动到页面顶部的操作将只在组件首次挂载时执行一次，避免了不必要的重复滚动。