解决 React 中 useEffect 运行两次的问题

摘要：本文旨在帮助开发者理解并解决 React 应用中 useEffect 钩子意外运行两次的问题。我们将深入探讨导致此现象的常见原因，并提供相应的解决方案，确保你的副作用函数仅在预期时机执行，避免潜在的性能问题和数据不一致。通过本文的学习，你将能够更好地控制 useEffect 的行为，构建更稳定、更高效的 React 应用。

在 React 开发中，useEffect 是一个强大的钩子，用于处理副作用操作，如数据获取、订阅事件等。然而，有时开发者会遇到 useEffect 运行两次的意外情况，这可能会导致不必要的 API 调用、资源浪费，甚至数据错误。本文将深入探讨导致 useEffect 运行两次的常见原因，并提供相应的解决方案。

常见原因及解决方案

1. React Strict Mode

   React 的 Strict Mode 是一种开发模式，旨在帮助开发者发现潜在的问题。在 Strict Mode 下，React 会故意调用某些函数两次，包括 useEffect 中的副作用函数。这有助于开发者识别那些不纯的副作用函数，即那些会修改组件外部状态的函数。

   解决方案：

   • 开发环境： 如果你只在开发环境中遇到此问题，并且确认你的副作用函数是纯的，可以暂时禁用 Strict Mode 来避免重复执行。但请注意，这会隐藏潜在的问题，因此建议在发布前重新启用 Strict Mode 进行检查。
   • 生产环境： 在生产环境中，不应禁用 Strict Mode。如果 useEffect 运行两次导致问题，你需要修改副作用函数，使其成为纯函数。例如，确保在副作用函数中只进行数据获取或更新组件内部状态，避免直接修改全局变量或外部 API。

   示例：

   假设你的 index.tsx 文件中使用了 Strict Mode：

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import App from './App';
   
   const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
   );
   root.render(
     
       
     
   );

   你可以暂时移除 来禁用 Strict Mode。

2. 依赖项问题

   useEffect 的第二个参数是一个依赖项数组，用于指定 effect 应该在哪些值发生变化时重新运行。如果依赖项数组为空 []，则 effect 只会在组件首次渲染时运行一次。但是，如果依赖项数组中的值发生变化，effect 就会重新运行。

   解决方案：

   • 检查依赖项： 仔细检查依赖项数组，确保其中只包含 effect 真正依赖的值。如果依赖项数组包含不必要的值，effect 可能会在不应该运行的时候运行。
   • 使用正确的依赖项： 确保依赖项数组中的值是最新的。如果依赖项数组中的值是过时的，effect 可能会在应该运行的时候没有运行。

   示例：

   import React, { useState, useEffect } from 'react';
   
   function MyComponent() {
     const [count, setCount] = useState(0);
     const [name, setName] = useState('Initial Name');
   
     useEffect(() => {
       console.log('Effect is running');
       document.title = `Count: ${count}`;
     }, [count]); // Only runs when 'count' changes
   
     return (
       
   
         
   Count: {count}
          setCount(count + 1)}>Increment
          setName(e.target.value)}
         />
       
     );
   }
   
   export default MyComponent;

   在这个例子中，useEffect 只会在 count 的值发生变化时运行，因为 count 是唯一的依赖项。如果添加了 name 作为依赖项，那么每次 name 改变时，useEffect 也会运行。

   

   行业贸易网站管理系统 2007 Beta 1

   1.修正BUG站用资源问题,优化程序2.增加关键词搜索3.修改报价4.修正BUG 水印问题5.修改上传方式6.彻底整合论坛,实现一站通7.彻底解决群发垃圾信息问题。注册会员等发垃圾邮件7.彻底解决数据库安全9.修改交易方式.增加网站担保,和直接交易两中10.全站可选生成html.和单独新闻生成html(需要装组建)11. 网站有10中颜色选择适合不同的行业不同的颜色12.修改竞价格排名方式13.修

   下载

3. 组件重新渲染

   如果组件由于其他原因重新渲染，useEffect 也会重新运行。这可能是由于父组件的状态更新、props 改变，或者使用了 forceUpdate 等方法。

   解决方案：

   • 优化组件渲染： 使用 React.memo、useMemo、useCallback 等方法来优化组件的渲染性能，避免不必要的重新渲染。
   • 避免不必要的状态更新： 仔细检查你的代码，确保只在必要时更新组件的状态。

   示例：

   import React, { useState, useEffect, memo } from 'react';
   
   const MyChildComponent = memo(({ data }) => {
     useEffect(() => {
       console.log('Child Effect running with data:', data);
     }, [data]);
   
     return 
   Data from parent: {data}
   ;
   });
   
   function MyParentComponent() {
     const [parentCount, setParentCount] = useState(0);
   
     return (
       
   
          setParentCount(parentCount + 1)}>
           Increment Parent Count
         
         
       
     );
   }
   
   export default MyParentComponent;

   在这个例子中，MyChildComponent 使用 memo 进行包裹，只有当 data prop 发生变化时才会重新渲染，从而避免了不必要的 useEffect 运行。

4. Next.js 开发环境下的 Fast Refresh

   在使用 Next.js 开发时，Fast Refresh 功能可能会导致 useEffect 在保存代码时运行两次。这是为了提供更快的开发体验，但有时会导致副作用函数意外执行。

   解决方案：

   • 检查代码逻辑： 确保你的副作用函数是幂等的，即多次执行不会产生副作用。
   • 条件执行： 可以添加条件判断，只在特定情况下执行副作用函数。

   示例（基于问题中的代码）：

   问题中的代码存在 loading 状态管理的问题，导致 useEffect 运行两次，并且 loading 状态始终为 false。以下是修改后的代码：

   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); // Set initial loading state to 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()) {
         setSessionId();
       } else {
         setLoading(false); // Set loading to false if session ID is present
       }
     }, []);
   
     return (
       <>
         

   关键修改：

   • 初始 loading 状态： 将 loading 的初始状态设置为 true，确保在获取 session ID 之前显示 "LOADING"。
   • getSessionId 函数： 提取获取 session ID 的逻辑到单独的函数中，提高代码可读性。
   • 在找到 session ID 后设置 loading 为 false： 如果在 cookie 中找到了 session ID，则将 loading 设置为 false。

总结

useEffect 运行两次通常是由于 React Strict Mode、依赖项问题、组件重新渲染或 Next.js Fast Refresh 引起的。通过理解这些原因，并采取相应的解决方案，你可以更好地控制 useEffect 的行为，构建更稳定、更高效的 React 应用。在调试 useEffect 时，始终要仔细检查依赖项、组件渲染逻辑，并考虑是否启用了 Strict Mode 或 Fast Refresh。