为什么当应用程序关闭时，组件将卸载不会在 React 根组件中触发

Question

如果用户退出应用程序时，如果存在某个cookie(使用通用cookie(，我需要从浏览器中删除cookie。

我拥有的代码：

componentWillUnmount(){
const cookies = new Cookies();
if(cookies.get("remember")==0){
cookies.remove("userName");
cookies.remove("password")
}
}

适用于其他组件，但我只需要它在根目录上才能在用户关闭应用程序之前触发。

为什么组件将卸载在应用程序退出时不会触发？

Answer 1

componentWillUnmount

不应该在浏览器窗口关闭时调用。beforeunload事件允许执行同步操作：

componentDidMount() {
window.addEventListener('beforeunload', this.onUnmount, false);
}
onUnmount = () => {
// clear cookies
}
componentWillUnmount() {
window.removeEventListener('beforeunload', this.onUnmount, false);
this.onUnmount();
}

beforeunload可能无法在某些浏览器中运行，并且不可靠。

这是XY问题。这以前是通过 cookie 过期来处理的，cookie 的生存期可能很短，但在浏览器窗口打开时会定期更新。

目前，cookie通常可以被认为是过时的，因为有localStorage和sessionStorage。凭据等敏感数据可以存储在sessionStorage中。它在浏览器退出时自动清除。