关闭应用程序后，为何在React根组件中未触发componentWillUnmount

Question

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

我有的代码：

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

  }

适用于其他组件，但我只需要在根上将其触发即可在用户关闭应用程序之前触发。

当应用程序退出时，为什么componentWillUnmount不会触发？

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可能是短期的，但在打开浏览器窗口时会定期更新。

由于存在localStorage和，因此目前通常认为cookie已过时sessionStorage。诸如凭据之类的敏感数据可以存储在中sessionStorage。它会在浏览器退出时自动清除。