如何修复 React 中的内存泄漏

React 内存泄漏会影响应用程序的性能。本文将带你了解 React 中的内存泄漏，并了解修复内存泄漏的三种不同方法。

在开发 React 应用程序时，内存泄漏是一个常见的问题。它会导致许多问题，包括：

• 占用内存量影响项目的性能；
• 影响应用程序运行速度；
• 系统崩溃。

因此，您需要消除内存泄漏问题。

使用异步调用时，您可能会在 React 应用程序中遇到以下警告消息：

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

React 不能直接检测内存泄漏，但它引入了一个警告来帮助您解决此问题。

内存泄漏的主要原因

如果在卸载组件后更新状态，则执行状态更新和运行异步操作的 React 组件可能会导致内存泄漏。这是导致此内存泄漏问题的正常情况：

1. 用户执行触发事件处理程序以从 API 获取数据的操作。
2. 之后，用户单击一个链接，该链接在完成第 1 步之前导航到另一个页面。
3. 现在，第一个操作完成并传递从 API 获取到的数据并调用函数来更新状态。

由于组件已卸载并且函数正在未安装的组件中调用，因此会导致内存泄漏问题 - 在控制台中，您将收到警告。

不安全代码示例：

const [value, setValue] = useState('checking value...');
useEffect(() => {
	fetchValue().then(() => {
     setValue("done!"); // ⚠️ what if the component is no longer mounted ?
     // we got console warning of memory leak
   });
}, []); 

内存泄漏修复

有几种方法可以消除内存泄漏。其中一些如下：

1) 使用布尔标志

const [value, setValue] = useState('checking value...');
useEffect(() => {
let isMounted = true;
fetchValue().then(() => {
      if(isMounted ){
      setValue("done!"); // no more error
      } 
    });
   return () => {
    isMounted = false;
    };
}, []);

在上面的代码中，我们创建了一个isMounted初始值为 true 的布尔变量。当isMounted为真时，更新状态并返回函数。否则，如果操作在完成之前卸载，则函数返回isMounted为 false。这确保了在执行新效果时，将首先处理先前的效果。

2) 使用 AbortController

useEffect(() => {  
    let abortController = new AbortController();  
    // your async action is here  
    return () => {  
    abortController.abort();  
    }  
    }, []);

在上面的代码中，我们使用AbortController取消订阅效果。异步操作完成后，会中止控制器并取消订阅效果。

3) 使用use-state-if-mounted Hook

const [value, setValue] = useStateIfMounted('checking value...');
    useEffect(() => {
    	fetchValue().then(() => {
          setValue("done!"); // no more error
        });
    }, []);

在上面的代码中，我们使用了一个类似于 React 的钩子useState，并且它还在更新状态之前检查组件是否已挂载！

结论

了解真相，才能获得真正的自由。我们在面对问题时，不光要了解解决办法，还要了解其背后的原理。
在本文中，您了解了 React 内存泄漏是什么以及如何使用三种不同的方法来修复内存泄漏，当然也有其他办法等待你去探索。