在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(
注意：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的重复调用和数据重复问题：
- 理解 React.StrictMode：它是一个开发工具，旨在帮助我们编写更健壮的副作用代码。了解其行为，并在必要时进行调整。
- 利用 useMemo 优化性能：缓存昂贵的计算结果，减少不必要的重渲染，提高组件效率和稳定性。
- 确保列表 key 的唯一性：这是React列表渲染的核心，正确的 key 使用能保证UI的正确性和性能。
在构建复杂的React应用，特别是涉及数据加载和列表渲染的场景（如无限滚动）时，深入理解这些概念并加以实践，将有助于开发出更高效、更可靠的组件。
