向 React 应用添加自动注销

TL;DR

const logoutTimerIdRef = useRef(null);

useEffect(() => {
  const autoLogout = () => {
    if (document.visibilityState === 'hidden') {
      const timeOutId = window.setTimeout(logoutUser, 5 * 60 * 1000);
      logoutTimerIdRef.current = timeOutId;
    } else {
      window.clearTimeout(logoutTimerIdRef.current);
    }
  };

  document.addEventListener('visibilitychange', autoLogout);

  return () => {
    document.removeEventListener('visibilitychange', autoLogout);
  };
}, []);

让我们看看这段代码到底发生了什么

1. 当包含此代码的组件安装时，我们设置一个事件监听器来监视页面可见性何时发生变化，即当用户离开或返回选项卡时，并调用autoLogout
2. 该autoLogout函数检查页面是否隐藏或可见
3. 如果页面隐藏，我们会设置一个计时器，在 5 分钟后注销用户
4. 如果页面可见，我们将清除之前设置的计时器
5. 我们返回一个清理函数，在组件卸载之前删除事件监听器

为了简洁起见，我省略了logoutUser函数定义，这超出了本文的讨论范围

为什么useRef而不是useState

你可以用 实现同样的效果useState，我没有这么做的唯一原因是设置状态值会导致重新渲染。虽然这在大多数情况下不是问题，但当你在每次更新时运行其他逻辑时，这可能会是个问题，比如componentDidUpdate

我搭建了两个 Codesandbox Playground 来演示这一点。第一个使用useState，第二个使用useRef。我已将两个 Playground 都设置为 10 秒后自动退出。如果您离开此页面后再返回，您会注意到第一个 Playground 中的渲染计数每次都会增加 1，而第二个 Playground 中的渲染计数始终保持在 1。