useEffect()在分页时多次重新呈现

useEffect() 是 React 中的一个 Hook，它允许你在组件渲染后执行副作用操作，比如数据获取、订阅或手动更改 DOM。当你在分页时遇到 useEffect() 多次重新呈现的问题，通常是因为依赖数组（dependency array）设置不当。

基础概念

useEffect() 接受两个参数：

effect：一个函数，该函数在组件渲染后执行。
dependency array：一个数组，包含 effect 依赖的变量。如果数组中的任何值发生变化，effect 将重新运行。

类型

useEffect() 有两种类型：

Mount and Update Effects：默认情况下，effect 在每次组件渲染后都会执行。
Cleanup Effects：通过在 effect 函数中返回一个清理函数，可以在组件卸载或依赖项变化时执行清理操作。

应用场景

数据获取
订阅外部数据源
手动更改 DOM

问题分析

当你在分页时遇到 useEffect() 多次重新呈现的问题，通常是因为依赖数组中包含了不必要的依赖项，或者没有正确处理分页状态的变化。

解决方法

假设我们有一个分页组件，每次分页时需要获取新的数据。我们可以通过以下方式优化 useEffect()：

import React, { useState, useEffect } from 'react';

const PaginationComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [data, setData] = useState([]);

  useEffect(() => {
    // 模拟数据获取
    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data?page=${currentPage}`);
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, [currentPage]); // 仅在 currentPage 变化时重新执行 effect

  const handlePageChange = (newPage) => {
    setCurrentPage(newPage);
  };

  return (
    <div>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>Previous</button>
      <button onClick={() => handlePageChange(currentPage + 1)}>Next</button>
    </div>
  );
};

export default PaginationComponent;