React Zombie Child 是指在 React 組件中的一個常見問題。當一個父組件被銷燬時，它的子組件可能仍然存在於內存中，這些子組件被稱爲“殭屍子組件”。
這種情況通常發生在異步操作中，例如在父組件中發起了一個異步請求，而在請求完成之前，父組件被銷燬了。但是，由於異步請求的回調函數仍然存在於內存中，它們會繼續執行，嘗試更新已經被銷燬的父組件的狀態或引用已經不存在的 DOM 元素。
這種情況可能導致一些問題，例如內存泄漏、不一致的 UI 狀態或錯誤的數據更新。爲了避免這種情況，我們可以在父組件銷燬時，手動取消異步操作或在回調函數中判斷父組件是否仍然存在。
以下是一個示例代碼，展示瞭如何處理 React 殭屍子組件的問題：
import React, { useState, useEffect } from 'react';
const ParentComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// 在回調函數中判斷父組件是否仍然存在
if (!isUnmounted) {
setData(data);
}
} catch (error) {
console.error(error);
}
};
let isUnmounted = false;
fetchData();
return () => {
// 在父組件銷燬時取消異步操作
isUnmounted = true;
};
}, []);
return (
<div>
{data ? (
<ChildComponent data={data} />
) : (
<div>Loading...</div>
)}
</div>
);
};
const ChildComponent = ({ data }) => {
return <div>{data}</div>;
};
export default ParentComponent;
在上面的示例代碼中，我們使用了 useEffect 鉤子來處理異步操作。在 useEffect 的回調函數中，我們創建了一個變量 isUnmounted 來判斷父組件是否已經被銷燬。在異步操作的回調函數中，我們首先判斷了 isUnmounted 的值，只有當父組件仍然存在時，才更新父組件的狀態。
通過這種方式，我們可以避免 React 殭屍子組件的問題，確保在父組件被銷燬時，相關的異步操作也被正確地取消。
參考資料：