如何条件性卸载组件？Service组件未自动卸载的原因排查

问题描述 #

在React应用中，期望仅当online为true且队列有内容时渲染Service组件，但倒计时结束后队列已为空，Service组件却依然保持渲染状态。

父组件条件渲染代码：

{!online ? (
    <TouchableOpacity onPress={changeOnlineStatus}>
        <Text>Go online</Text>
    </TouchableOpacity>
) : online && queue === 0 ? (
    <TouchableOpacity onPress={changeOnlineStatus}>
        <Text>Go offline</Text>
    </TouchableOpacity>
) : (
    <Service details={userDetails.queueItems[0].details} />
)}

Service组件中通过定时器修改队列的代码：

// 初始倒计时5秒
const [timeRemaining, setTimeRemaining] = useState(5);

useEffect(() => {
    setTimeout(() => {
        if (timeRemaining > 0) {
            setTimeRemaining(timeRemaining - 1);
        } else {
            userDetails.queueItems.shift();
            return;
        }
    }, 1000);
}, [timeRemaining]);

队列定义在常量文件中：

queueItems: [
    {
        title: "Test",
    },
]

问题原因 #

1. 直接修改非状态数据：你直接修改了常量文件里的userDetails.queueItems数组，React无法监测到这种直接的数组修改操作。React的组件更新仅依赖setState或状态管理库的更新方法触发，直接修改常量/普通变量不会触发组件重新渲染。
2. 父组件未感知队列变化：父组件的条件渲染逻辑依赖队列状态，但队列并非父组件的状态变量，当队列被直接修改后，父组件不会重新执行条件判断，自然不会移除Service组件。
3. 定时器未清理：当前useEffect没有清理定时器，可能导致定时器重复触发，引发不必要的逻辑异常。

解决方案 #

1. 将队列转为状态变量 #

放弃用常量存储队列，在父组件或合适的层级用useState维护队列状态：

// 父组件中
const [queueItems, setQueueItems] = useState([
    { title: "Test" }
]);

// 通过setQueueItems更新队列，确保触发组件更新
const removeFirstQueueItem = () => {
    setQueueItems(prevItems => prevItems.slice(1)); // 用slice创建新数组，避免直接修改原数组
};

2. 修正Service组件的定时器逻辑 #

将队列更新逻辑通过props传递给Service组件，确保状态更新能触发父组件重新渲染：

// Service组件
const Service = ({ details, onQueueItemFinish }) => {
    const [timeRemaining, setTimeRemaining] = useState(5);

    useEffect(() => {
        const timer = setTimeout(() => {
            if (timeRemaining > 0) {
                // 使用函数式更新，避免闭包导致的状态值滞后问题
                setTimeRemaining(prevTime => prevTime - 1);
            } else {
                onQueueItemFinish(); // 通知父组件移除队列项
            }
        }, 1000);

        // 组件卸载时清理定时器，防止内存泄漏
        return () => clearTimeout(timer);
    }, [timeRemaining, onQueueItemFinish]);

    return <div>{details?.title}</div>;
};

3. 修正父组件的条件判断逻辑 #

确保父组件的条件判断依赖状态化的队列：

{!online ? (
    <TouchableOpacity onPress={changeOnlineStatus}>
        <Text>Go online</Text>
    </TouchableOpacity>
) : online && queueItems.length === 0 ? ( // 用状态化的queueItems.length判断队列是否为空
    <TouchableOpacity onPress={changeOnlineStatus}>
        <Text>Go offline</Text>
    </TouchableOpacity>
) : (
    <Service 
        details={queueItems[0]} 
        onQueueItemFinish={removeFirstQueueItem} 
    />
)}

关键要点 #

• React仅会在状态或props发生变化时重新渲染组件，直接修改常量、普通变量不会触发更新。
• 更新数组/对象时必须返回新的引用（比如用slice、map、扩展运算符），不能直接修改原数据。
• 定时器、订阅等副作用必须在组件卸载时清理，避免内存泄漏。

内容的提问来源于stack exchange，提问作者darkshadowtrail