React开发者经常遇到useEffect钩子意外执行两次的情况，尤其是在开发模式下。本文将深入探讨useEffect重复执行的原因，并提供有效的解决方案，确保你的副作用函数按预期运行，同时优化加载状态的管理，避免不必要的数据库操作。
为什么useEffect会执行两次？
在React 18及更高版本中，严格模式（Strict Mode）默认启用，尤其是在开发环境下。严格模式旨在帮助开发者尽早发现潜在问题，它会故意触发某些副作用函数两次，以暴露不纯的渲染和潜在的错误。这通常是useEffect重复执行的罪魁祸首。
如何解决useEffect重复执行问题？
虽然严格模式是导致useEffect重复执行的主要原因，但我们通常不建议直接禁用它，因为它有助于发现潜在的bug。相反，我们应该修改我们的代码，使其能够正确处理重复执行的情况。以下是一些有效的策略：
1. 幂等性操作
确保你的副作用函数是幂等的。这意味着无论函数执行多少次，其结果都应该相同。例如，如果你的useEffect用于向数据库发送请求，确保你的API能够处理重复请求，或者在客户端实现去重逻辑。
2. 利用useRef存储状态
如果useEffect中的副作用是基于某个状态的，你可以使用useRef来存储该状态，并在每次执行副作用之前检查该状态是否已经更新。useRef创建的是一个可以在组件的整个生命周期中保持不变的变量，且修改useRef不会触发组件重新渲染。
3. 移除或调整严格模式
如果确认严格模式是导致问题的唯一原因，并且无法修改副作用函数以适应重复执行，可以考虑暂时移除或调整严格模式的范围。但请记住，这可能会隐藏潜在的问题，因此应谨慎使用。
4. 优化依赖项
检查useEffect的依赖项数组。确保只包含真正需要监听的状态或props。不必要的依赖项会导致useEffect在不必要的时候执行。
示例代码分析与改进
以下面的代码为例，展示如何解决useEffect重复执行以及加载状态管理的问题：
import { type AppType } from 'next/app';
import { api } from '~/utils/api';
import '~/styles/globals.css';
import Nav from '~/components/Nav';
import { useEffect, useState } from 'react';
const MyApp: AppType = ({ Component, pageProps }) => {
const [showCart, setShowCart] = useState(false);
const [loading, setLoading] = useState(false);
const createSession = api.user.createSession.useMutation();
const generateId = async (): Promise => {
const res = await createSession.mutateAsync();
if (res.response) {
return res.response.id;
} else if (res.error) {
return res.error;
}
};
const setSessionId = async () => {
const tmp: string | undefined = await generateId();
if (tmp) document.cookie = `sessionId=${tmp}`;
setLoading(false);
};
useEffect(() => {
if (!loading) {
setLoading(true);
const cookieString: string = document.cookie;
const cookies: string[] = cookieString.split(';') || [];
let sessionId: string | null = null;
for (let i = 0; i < cookies.length; i++) {
const cookie: string | undefined = cookies[i];
if (!cookie || cookie.trim() === '') {
continue;
}
if (cookie.trim().startsWith('sessionId=')) {
sessionId = cookie.trim().substring('sessionId='.length);
break;
}
}
if (!sessionId) {
void setSessionId();
}
}
}, []);
return (
<>
{loading && 'LOADING'}
问题分析：
- useEffect依赖项为空，导致组件每次渲染都会执行。
- loading状态的设置和使用不一致，导致加载状态显示不正确。
改进后的代码：
import { type AppType } from 'next/app';
import { api } from '~/utils/api';
import '~/styles/globals.css';
import Nav from '~/components/Nav';
import { useEffect, useState } from 'react';
const MyApp: AppType = ({ Component, pageProps }) => {
const [showCart, setShowCart] = useState(false);
const [loading, setLoading] = useState(true); // 初始化loading为true
const createSession = api.user.createSession.useMutation();
const generateId = async (): Promise => {
const res = await createSession.mutateAsync();
if (res.response) {
return res.response.id;
} else if (res.error) {
return res.error;
}
};
const setSessionId = async () => {
const tmp: string | undefined = await generateId();
if (tmp) document.cookie = `sessionId=${tmp}`;
setLoading(false);
};
useEffect(() => {
const getSessionId = () => {
const cookieString: string = document.cookie;
const cookies: string[] = cookieString.split(';') || [];
let sessionId: string | null = null;
for (let i = 0; i < cookies.length; i++) {
const cookie: string | undefined = cookies[i];
if (!cookie || cookie.trim() === '') {
continue;
}
if (cookie.trim().startsWith('sessionId=')) {
sessionId = cookie.trim().substring('sessionId='.length);
break;
}
}
return sessionId;
};
if (!getSessionId()) {
void setSessionId();
} else {
setLoading(false); // 如果sessionId已存在，则设置loading为false
}
}, []);
return (
<>
{loading && LOADING
} {/* 仅当loading为true时显示 */}
改进说明：
- 初始化 loading 状态： 将 loading 的初始状态设置为 true，确保在组件挂载时显示加载状态。
- 移除不必要的 loading 判断： 在 useEffect 内部移除了 if (!loading) 的判断，因为初始时 loading 已经是 true，并且在获取或创建 sessionId 后会设置为 false。
- useEffect 依赖项： 保持依赖项为空数组 []，确保 useEffect 只在组件挂载时执行一次。
总结
useEffect重复执行是React开发中常见的问题，但通过理解其原因并采取适当的措施，可以有效地解决这个问题。关键在于理解严格模式的作用，确保副作用函数的幂等性，并优化依赖项。同时，正确管理加载状态，可以提升用户体验。通过本文提供的策略和示例代码，相信你能更好地掌握useEffect的使用，避免重复执行带来的问题。
