在ReactJS中如何避免在使用useEffect()时出现无限循环

React的关键特性是它的effect hook，它允许开发人员在React组件中管理副作用。然而，如果不正确使用，useEffect hook可能会导致无限循环，导致性能问题并使应用程序崩溃。在本文中，我们将探讨无限循环的常见原因以及如何避免它们。

通过在依赖数组中提供适当的依赖项来避免在useEffect()中出现无限循环。对于一次性执行，请使用空数组，对于触发效果，请使用特定的状态值，或者对于选择性执行，请使用多个状态值和条件。

useEffect() Hook

ReactJS中的useEffect() hook用于在功能组件中执行副作用。它在每次render后运行一个函数，允许执行数据获取、订阅或修改DOM等操作。

本文所讨论的问题是在React中使用useEffect hook时可能遇到无限循环的可能性。下面讨论了一些常见的原因：

未指定依赖项： 无限循环的最常见原因是未正确指定依赖项。如果您不传递任何依赖项，该hook将在每次render后调用，导致无限循环。为了避免这种情况，您应该始终指定hook依赖的依赖项。

例如，如果您从API获取数据，则应将API端点作为依赖项传递。这确保了当端点更改时才调用该hook。

useEffect(() => {
     fetchData(endpoint);
}, [endpoint]);

在hook内修改状态： 另一个常见的错误是在useEffect hook内修改状态。当在hook内修改状态时，会触发重新渲染，导致hook再次被调用。这会造成无限循环。

为了避免这种情况，你应该只在事件处理程序或其他状态更新函数（例如useState或useReducer）内修改状态。

条件语句的错误使用： 如果条件语句依赖于在hook内修改的状态，它也会导致无限循环。

为了避免这种情况，应该将条件语句移到hook外部，并使用一个单独的状态变量来跟踪条件。

const [modal, setModal] = useState(false);
useEffect(() => {
    if (modal) {
        // Do something
    }
}, [modal]);
function handleClick() {
    setModal(true);
}

该文章提出的解决方案着重于通过正确指定依赖关系和在useEffect钩子之外管理状态更新来避免无限循环。其中一些方法包括：

正确指定依赖关系： 为了避免无限循环，您应该始终明确指定hook所依赖的依赖关系。这确保了只有在依赖关系发生变化时才调用该hook。

useEffect(() => {
    // Effect code
}, [dependency1, dependency2, ...]);

将状态更新移出钩子函数： 为了避免在钩子函数内部修改状态而导致无限循环，您应该将状态更新移出钩子函数并使用事件处理程序或其他状态更新函数。

const handleClick = () => {
    setCount(count + 1);
};
useEffect(() => {
    // Effect code
}, [dependency]);

使用记忆化： 记忆化是一种用于通过缓存函数调用结果来优化函数性能的技术。我们也可以使用记忆化来优化useEffect钩子的性能，通过缓存昂贵操作的结果。

const memoizedCallback = useCallback(
    () => {
        // do something
    },
    [dependency],
);
useEffect(() => {
    memoizedCallback();
}, [memoizedCallback]);

创建一个React应用

步骤1： 创建一个React项目：

npx create-react-app appname

步骤2： 在创建项目文件夹即appname之后，使用以下命令切换到该文件夹：

cd appname

运行应用的步骤： 从项目的根目录中使用以下命令来运行应用。

npm start

项目结构： 它将如下所示：

在ReactJS中如何避免在使用useEffect()时出现无限循环

现在，我们将看一些使用不同方法避免或防止在使用useEffect()钩子时产生无限循环的示例。

方法1

在这个示例中，我们使用useEffect钩子从API获取数据。我们将一个空数组作为依赖数组传递给钩子，这意味着钩子在组件挂载后只会调用一次。如果我们没有指定任何依赖项，钩子将在每次渲染后调用，导致无限循环。通过指定空数组作为依赖项，我们确保钩子只调用一次，并避免任何性能问题或崩溃。

安装axios模块

npm install axios

示例：

在下面的示例中，演示了如何在使用React的useEffect钩子时避免无限循环。

import React, { 
    useState, 
    useEffect 
} from 'react'; 
  
import axios from 'axios'; 
  
function App() { 
    const [data, setData] = useState([]); 
    const [loading, setLoading] = useState(false); 
  
    useEffect(() => { 
        setLoading(true); 
  
        axios.get( 
            'https://...com/posts') 
            .then((response) => { 
                setData(response.data); 
                setLoading(false); 
            }) 
            .catch((error) => { 
                console.log(error); 
                setLoading(false); 
            }); 
    }, []); // This is the dependency array 
  
    if (loading) { 
        return <p>Loading data...</p>; 
    } 
  
    return ( 
        <div> 
            <center> 
                <h1 style={{ color: 'green' }}> 
                    GeeksforGeeks 
                </h1> 
                <h3> 
                    How to avoid infinite loop when  
                    using useEffect hook in React 
                </h3> 
            </center> 
            <h3>Posts</h3> 
            <ul> 
                {data.map((post) => ( 
                    <li key={post.id}> 
                        <h2>{post.title}</h2> 
                        <p>{post.body}</p> 
                    </li> 
                ))} 
            </ul> 
        </div> 
    ); 
} 
  
export default App;

输出:

在ReactJS中如何避免在使用useEffect()时出现无限循环

方法2

在这个示例中，我们使用useCallback钩子函数来记住handleClick函数。这个函数作为prop被传递到ChildComponent中，所以我们希望确保只有在它的依赖项改变时才重新创建。我们将一个空数组作为依赖项数组传递，这意味着函数只会被创建一次。

示例： 以下示例演示了在React的useEffect钩子中使用记忆功能来避免无限循环。

import React, { 
    useState, 
    useEffect, 
    useCallback 
} from 'react'; 
  
function ChildComponent({ onClick }) { 
    return <button onClick={onClick}>Click me</button>; 
} 
  
function App() { 
    const [count, setCount] = useState(0); 
  
    const handleClick = useCallback(() => { 
        console.log('Clicked!'); 
    }, []); // This is the dependency array 
  
    useEffect(() => { 
        console.log('Count changed!'); 
    }, [count]); 
  
    return ( 
        <div> 
            <center> 
                <h1 style={{ color: 'green' }}> 
                    GeeksforGeeks 
                </h1> 
                <h3> 
                    How to avoid infinite loop when  
                    using useEffect hook in React 
                </h3> 
            </center> 
            <h1> 
                Count: {count} 
            </h1> 
            <ChildComponent onClick={handleClick} /> 
            <button onClick={() => setCount(count + 1)}> 
                Increment count 
            </button> 
        </div> 
    ); 
} 
  
export default App;