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

Question

考虑以下代码:

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。因此，我所期望的不是保持它的状态。相反，state.current的值总是增加的。我真的很困惑……

Answer 1

当visible值为false时，您的Bottom组件将在组件树中描述。所以这个组件永远不会被卸载但是真正被卸载的是div元素。

然而，如果你这样做，

function Middle() {
const [show, setShow]=useState(false);
return (
<div>
<button onClick={()=>setShow(v=>!v)}>MIDDLE</button>
{show && <Bottom visible={show}/>}
</div>
);
}

现在你的Buttom组件卸载时，show假。这一次，当show为true时，你的ref将被重置回它的初始值，因为组件被重新安装。

或者如果你真的想重置你的组件，你可以使用keyprop。当你需要重置你的组件时，只需传递一个不同的键值给你的组件。