卸载后组件状态仍然存在？

【问题标题】：Component state persists after unmounting?卸载后组件状态仍然存在？
【发布时间】：2023-01-14 09:02:14
【问题描述】：

考虑以下代码：

function Middle() {
    const [show, setShow]=useState(false);

    return (
        <div>
            <button onClick={()=>setShow(v=>!v)}>MIDDLE</button>
            <Bottom visible={show}/>
        </div>
    );
}


function Bottom(props) {
    const {visible} = props;
    const state = useRef(0);
   
    useEffect(() => {
        console.log('Hey', state.current++);
    });

    return (
        <>
            {visible && <div>BOTTOM</div> }
        </>
    );
}

每当我们点击按钮 MIDDLE 时，依次挂载/卸载；至少这是我的理解，因为它被添加到 DOM 中/从 DOM 中删除。因此，我应该期望的是不要坚持它的状态。相反，它确实发生的是 state.current 总是增加它的价值。我真的很困惑...

【问题讨论】：

将您拥有的内容与中间组件中的 { show && <Bottom visible={show} /> } 进行比较。

标签： reactjs

【解决方案1】：

当 visible 值为 false 时，您的 Button 组件仍在您的组件树中描述。因此该组件永远不会被卸载，但实际被卸载的是 div 元素。

但是，如果你这样做，

function Middle() {
    const [show, setShow]=useState(false);

    return (
        <div>
            <button onClick={()=>setShow(v=>!v)}>MIDDLE</button>
            {show && <Bottom visible={show}/>}
        </div>
    );
}

现在当show false 时你的Buttom 组件被卸载。这次您的 ref 将重置为初始值。

或者，如果你真的想重置你的组件，你可以使用 key prop。当您需要重置您的组件时，只需将不同的键值传递给您的组件即可。

【讨论】：