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的使用，避免重复执行带来的问题。
以上就是解决React中useEffect重复执行的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529069.html
微信扫一扫 
支付宝扫一扫 
