React无限滚动优化：解决重复加载与数据重复问题

React无限滚动是现代Web应用中常见的交互模式，但随之而来的useEffect重复触发和数据重复问题也困扰着开发者。本文针对这些痛点，深入探讨了React.StrictMode在开发模式下的影响，以及如何利用useMemo优化组件渲染性能，避免不必要的API请求和数据重复。特别地，文章强调了列表渲染中key属性的正确使用，以及在数据源ID不唯一的情况下，如何选择合适的key来保证UI的正确性和性能。通过理解React.StrictMode的行为、利用useMemo缓存计算结果、确保列表key的唯一性，开发者可以构建更稳定、高效的无限滚动组件，提升用户体验和应用性能。

在React应用开发中，开发者常常会遇到useEffect钩子被意外多次调用的情况，尤其是在使用React.StrictMode时。这不仅可能导致API请求重复发送，还可能引发数据重复等问题，特别是在需要精确控制副作用的无限滚动等场景中。本教程将针对这些常见问题提供解决方案和优化策略。

理解开发模式下的 useEffect 双重调用

React.StrictMode（严格模式）是React提供的一个用于在开发环境下检测潜在问题的工具。它不会在生产环境中生效，但在开发模式下，它会故意双重调用某些生命周期方法（包括useEffect的清理函数和副作用函数），以帮助开发者识别那些不符合React最佳实践的副作用，例如没有正确清理的订阅或异步操作。

问题表现： 在严格模式下，首次加载应用时，useEffect中的API请求可能会被调用两次。这通常是严格模式为了强调副作用的幂等性而进行的模拟。

解决方案： 如果这种双重调用在开发阶段造成困扰，且您已确认副作用是幂等的（即多次执行不会产生额外副作用或不正确的结果），可以暂时移除或在部署前移除React.StrictMode。然而，更推荐的做法是理解其目的，并确保您的副作用逻辑能够妥善处理双重执行。

示例：移除 React.StrictMode

在您的 src/index.js 或 src/App.js 文件中，找到并移除 React.StrictMode 包裹的部分：

// src/index.js (修改前)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);

// src/index.js (修改后)
import React from 'react';
import ReactDOM from 'react.com/client'; // 更正为 'react-dom/client'
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
   // 移除 StrictMode
);

注意：ReactDOM.createRoot(document.getElementById('root')) 中的 com 应该是 dom。

优化组件渲染性能与避免重复数据

除了严格模式的影响，组件的不必要重渲染也可能导致useEffect意外触发，进而引发数据重复。例如，当父组件的某些无关状态发生变化时，如果子组件或自定义钩子内部的计算没有被优化，它们可能会被重新执行，甚至可能导致API请求的重复。

2.1 使用 useMemo 优化派生状态或计算

在React中，每次组件重新渲染时，其内部的所有函数和变量都会被重新创建。如果某些变量是通过复杂计算或映射大量数据得到的，并且这些计算的结果在依赖项不变的情况下是稳定的，那么重复计算会造成性能浪费。useMemo钩子可以帮助我们缓存这些计算结果，只有当其依赖项发生变化时才重新计算。

问题表现： 在无限滚动组件中，渲染列表内容 (content) 是一个映射数据数组的操作。如果data没有变化，但组件因为其他原因重渲染，content会再次被完全计算，这不仅浪费性能，也可能间接影响其他逻辑（尽管它不直接导致useEffect的重复触发，但它能减少不必要的渲染工作，从而提高组件的稳定性）。

解决方案： 使用 useMemo 缓存 content 变量，确保只有当 data 数组发生变化时才重新计算。

示例：在 InfiniteScroll.js 中使用 useMemo

// src/InfiniteScroll.js
import { useRef, useState, useMemo } from "react"; // 引入 useMemo
import usePosts from "./usePosts";

const InfiniteScroll = () => {
  const [page, setPage] = useState(1);
  const lastPostRef = useRef();
  const { data, loading, isLastPage } = usePosts(page);

  // 使用 useMemo 缓存 content，仅在 data 变化时重新计算
  const content = useMemo(() => {
    return data.map((post, i) => {
      if (data.length === i + 1) {
        return (
          

            {post.title}
          
        );
      }
      return 
{post.title}
;
    });
  }, [data, lastPostRef]); // 依赖项包括 data 和 lastPostRef

  return (
    

      {content}
      {loading && 
Loading More Posts...
}
    
  );
};

export default InfiniteScroll;

注意：lastPostRef 作为依赖项加入 useMemo 是为了确保当 lastPostRef 自身（尽管通常在组件生命周期内不变）或其引用的元素变化时，content 能够正确更新。但在本例中，lastPostRef 应该是一个稳定的引用，所以主要依赖是 data。

2.2 确保列表渲染的键（Key）唯一性

在React中渲染列表时，为每个列表项提供一个稳定且唯一的 key 属性至关重要。key 帮助React识别哪些项发生了变化、被添加或被移除，从而优化渲染性能和保持组件状态。

问题表现： 如果列表项的 key 不唯一或不稳定（例如，在数据源中 post.id 可能重复，或者在某些情况下使用数组索引作为 key），当列表更新时，React可能无法正确识别项的变化，导致不必要的DOM操作、组件状态丢失，甚至渲染出重复或错误的UI。

解决方案： 优先使用数据源中稳定且唯一的ID作为 key。如果数据源没有提供这样的ID，或者已知ID可能不唯一（如本例中 post.id 被指出不唯一），则可以使用数组索引作为备选，但需注意，当列表项的顺序可能改变、被添加或移除时，使用索引作为 key 可能导致性能问题和组件状态错乱。在本例中，由于 post.id 不唯一，推荐使用 index。

示例：在 InfiniteScroll.js 中使用 index 作为 key

// src/InfiniteScroll.js (content 部分)
import { useRef, useState, useMemo } from "react";
import usePosts from "./usePosts";

const InfiniteScroll = () => {
  // ... 其他代码 ...

  const content = useMemo(() => {
    return data.map((post, i) => {
      if (data.length === i + 1) {
        return (
          
 {/* 使用 i 作为 key */}
            {post.title}
          
        );
      }
      return 
{post.title}
; // 使用 i 作为 key
    });
  }, [data, lastPostRef]);

  // ... 其他代码 ...
};

export default InfiniteScroll;

总结

通过以上优化措施，我们可以有效解决React应用中useEffect的重复调用和数据重复问题：

1. 理解 React.StrictMode：它是一个开发工具，旨在帮助我们编写更健壮的副作用代码。了解其行为，并在必要时进行调整。
2. 利用 useMemo 优化性能：缓存昂贵的计算结果，减少不必要的重渲染，提高组件效率和稳定性。
3. 确保列表 key 的唯一性：这是React列表渲染的核心，正确的 key 使用能保证UI的正确性和性能。

在构建复杂的React应用，特别是涉及数据加载和列表渲染的场景（如无限滚动）时，深入理解这些概念并加以实践，将有助于开发出更高效、更可靠的组件。

今天关于《React无限滚动优化：解决重复加载与数据重复问题》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！