问题剖析：useEffect 多次触发与数据重复
在 React 开发过程中，开发者常会遇到 useEffect 钩子在组件挂载时被多次调用的情况，尤其是在使用 React.StrictMode（严格模式）时。严格模式是 React 提供的一个开发工具，用于在开发环境中识别潜在的问题，例如不安全的生命周期方法、遗留的字符串 ref 用法以及意外的副作用。为了帮助开发者发现这些副作用，严格模式会在开发环境下有意地双重渲染组件，这意味着 useEffect 中的清理函数会立即执行，然后效果会再次设置。
对于无限滚动（Infinite Scroll）等需要精确控制数据加载的场景，useEffect 的多次触发会导致严重的后果。例如，一个负责加载分页数据的 usePosts 钩子，其内部的 useEffect 依赖于 pageNum。如果 useEffect 在组件初次挂载时被触发两次，或者在组件状态发生不相关变化时意外地重新触发（例如，由于父组件的重新渲染导致子组件也重新渲染），则会向 API 发出重复请求，进而导致 setData((prevData) => [...prevData, ...posts]); 将重复的数据添加到 data 数组中，从而在 UI 上展示重复内容。
// usePosts.js 中的 useEffect 示例
useEffect(() => {
const getData = async () => {
// 这里的 API 调用可能会被重复触发
const { posts, total, skip, limit } = await getPosts(pageNum, 10);
setData((prevData) => [...prevData, ...posts]); // 可能导致数据重复
setLoading(false);
if (total === skip * limit) setIsLastPage(true);
};
getData();
}, [pageNum]); // 期望只在 pageNum 变化时触发此外，当组件内部的某些计算结果（如渲染列表的 content）没有被缓存时，即使数据没有变化，每次父组件或自身重新渲染也可能导致这些计算重复执行，从而影响性能。同时，不正确的列表 key 属性使用也会加剧渲染问题，尤其是在数据重复时。
解决方案一：理解并处理 React.StrictMode
React.StrictMode 的目的是帮助开发者发现组件中的副作用，它通过在开发环境下双重调用某些生命周期方法和 useEffect 来实现。这意味着，如果你的 useEffect 没有正确地清理副作用，或者其中的操作不幂等（即多次执行会产生不同结果），那么严格模式会暴露这些问题。
处理方式：
- 理解其目的： 严格模式不是一个 Bug，而是一个调试工具。它在生产环境中不会生效。在开发阶段，你应该确保你的 useEffect 具备幂等性，或者有适当的清理函数。
- 临时移除（仅限开发调试）： 如果你确定 useEffect 的逻辑是正确的，并且希望在开发环境下避免双重调用带来的干扰，可以暂时从 index.js 或 App.js 中移除 React.StrictMode。这通常用于快速定位问题，但在生产环境中，你的代码应该能够处理严格模式下的行为。
// App.js 或 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(
// 移除或注释掉 React.StrictMode，仅在开发环境下进行
// <React.StrictMode>
<App />
// </React.StrictMode>
);注意事项： 移除严格模式只是一种权宜之计。更好的做法是让你的 useEffect 能够适应严格模式，例如通过使用清理函数来避免重复操作，或者确保副作用是幂等的。对于数据加载，通常需要一个状态来标记是否正在加载，并避免在加载中再次触发请求。
解决方案二：利用 useMemo 优化组件渲染
在 React 中，当父组件重新渲染时，其子组件也会默认重新渲染。如果子组件内部有复杂的计算或数据转换（例如 map 遍历一个大数组生成 JSX 元素），这些操作可能会在每次渲染时重复执行，导致不必要的性能开销。useMemo 钩子可以帮助我们缓存计算结果，只有当其依赖项发生变化时才重新计算。
在无限滚动组件中，渲染列表内容 content 就是一个典型的优化点。如果 data 数组没有变化，那么 content 的生成逻辑不需要重新执行。
// 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) => {
// 确保 key 属性的正确性，见解决方案三
if (data.length === i + 1) {
return (
<p key={post.id || i} ref={lastPostRef}> {/* 修正 key 的使用 */}
{post.title}
</p>
);
}
return <p key={post.id || i}>{post.title}</p>; {/* 修正 key 的使用 */}
});
}, [data]); // 依赖项是 data 数组
return (
<div>
{content}
{loading && <p className="center">Loading More Posts...</p>}
</div>
);
};
export default InfiniteScroll;通过将 content 的生成包裹在 useMemo 中，并将其依赖项设置为 data，我们确保只有当 data 数组实际发生变化时，才会重新生成列表内容，从而避免了不必要的渲染。
解决方案三：正确使用列表的 key 属性
在 React 中渲染列表时，key 属性是至关重要的。它帮助 React 识别列表中哪些项发生了变化、被添加或被移除。一个正确的 key 应该满足以下条件：
- 唯一性： 在同一个列表中，每个 key 必须是唯一的。
- 稳定性： 对于同一个列表项，key 在多次渲染之间应该保持不变。
在数据重复的场景中，如果 API 返回的 post.id 并不是全局唯一的，或者由于 useEffect 的问题导致相同的 post.id 被多次添加到 data 数组中，那么直接使用 post.id 作为 key 将导致 React 警告（Warning: Encountered two children with the same key）并可能引发渲染问题。
何时使用 index 作为 key：
虽然官方文档不推荐将数组索引 (index) 作为 key，因为它在列表项顺序变化、添加或删除时会导致问题，但在以下特定情况下，使用 index 可以作为一种临时或次优的解决方案：
- 列表项没有稳定的 ID。
- 列表项的顺序永远不会改变。
- 列表项不会被添加或删除。
- （如本例）由于数据重复导致稳定 ID 变得不唯一时，index 可以作为一种规避渲染错误的方式，但根本问题仍是数据重复。
考虑到本例中 post.id 在数据重复后不再唯一，使用 index 是一个可行的临时修正，但更根本的解决办法是确保数据源的唯一性，并避免数据重复。
// InfiniteScroll.js (修正 key 属性)
import { useRef, useState, useMemo } from "react";
import usePosts from "./usePosts";
const InfiniteScroll = () => {
const [page, setPage] = useState(1);
const lastPostRef = useRef();
const { data, loading, isLastPage } = usePosts(page);
const content = useMemo(() => {
return data.map((post, i) => {
// 如果 post.id 确保在整个数据集（包括追加的数据）中唯一且稳定，则使用 post.id
// 如果 post.id 不唯一（例如由于数据重复），或者没有稳定 ID，则使用 index 作为备选
// 注意：使用 index 作为 key 在列表项顺序变化时会有问题，但在此处作为临时修复
const key = post.id !== undefined && post.id !== null ? post.id : i; // 优先使用 post.id，否则使用 index
if (data.length === i + 1) {
return (
<p key={key} ref={lastPostRef}>
{post.title}
</p>
);
}
return <p key={key}>{post.title}</p>;
});
}, [data]);
return (
<div>
{content}
{loading && <p className="center">Loading More Posts...</p>}
</div>
);
};
export default InfiniteScroll;最佳实践： 始终优先使用数据中稳定且唯一的 ID 作为 key。如果 API 没有提供，可以考虑在客户端生成唯一 ID（如使用 uuid 库），或者在后端修复数据源问题。
总结与最佳实践
解决 useEffect 多次调用和数据重复问题需要对 React 的生命周期、副作用管理以及性能优化有深入的理解。
- 理解 React.StrictMode： 它是一个有用的开发工具，旨在帮助你发现副作用问题。不要仅仅因为它导致双重渲染就盲目移除它。相反，尝试确保你的 useEffect 逻辑是幂等的，并且有正确的清理函数。
- 精确控制 useEffect 依赖： 确保 useEffect 的依赖数组只包含真正需要触发效果重新运行的变量。避免不必要的依赖会导致不必要的副作用。
- 优化组件渲染： 使用 useMemo 和 useCallback 等钩子来缓存计算结果和回调函数，避免不必要的重新渲染，尤其是在处理大型列表或复杂计算时。
- 正确使用 key 属性： 列表渲染时，为每个列表项提供一个稳定且唯一的 key。这是 React 高效更新列表的关键。如果数据重复导致 id 不唯一，优先解决数据重复的根本问题，而不是仅仅依靠 index 作为 key。
- 调试技巧： 利用 React DevTools 观察组件的渲染次数和状态变化，这对于定位 useEffect 触发问题非常有帮助。
通过遵循这些最佳实践，你将能够构建更健壮、性能更优的 React 应用，有效避免 useEffect 的意外行为和数据管理中的常见陷阱。
