17370845950

新闻动态

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

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

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

常见原因及解决方案

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。
依赖项问题

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}
      
       setName(e.target.value)}
      />
    
  );
}

export default MyComponent;
```
在这个例子中，useEffect 只会在 count 的值发生变化时运行，因为 count 是唯一的依赖项。如果添加了 name 作为依赖项，那么每次 name 改变时，useEffect 也会运行。
组件重新渲染

如果组件由于其他原因重新渲染，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 (
    
      
      
    
  );
}

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

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} {/* Show LOADING only if loading is true */}
      
    
  );
};

export default api.withTRPC(MyApp);

关键修改：

初始 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。

17370845950

常见原因及解决方案

总结

关于我们

服务项目

广告推广

案例欣赏