React：页面再次显示时如何触发通知？及相关useEffect疑问

问题场景 #

从其他网页返回当前React页面时，需要触发通知并重新拉取后端数据（因为其他网站操作会改变后端状态），但现有带依赖的useEffect无法触发：

function BuyTicket(props: BuyTicketProps) {
  useEffect(() => {
    // 刷新逻辑
  }, [authnRes, buyTicketData, programId])
}

疑问1：是否应添加isRequredToRefresh状态，在设置window.location.href的前后将其设为true？但担心该操作在导航前执行？ #

没必要额外添加这个状态。跳转到外部网站时，当前页面组件会被卸载，返回时组件会重新初始化，之前设置的状态不会保留，完全起不到作用。正确思路是监听浏览器层面的事件（比如页面可见性变化、浏览器返回事件），在用户回到页面时触发刷新逻辑，而非依赖组件内状态。

疑问2：React中与iOS的viewDidAppear等效的实现是什么？ #

iOS的viewDidAppear是页面完全出现在屏幕时触发，React里可以通过以下方式实现类似效果：

1. 监听页面可见性变化：利用浏览器visibilitychange事件，当页面从隐藏切换为可见（比如用户从其他网页切回）时，执行刷新逻辑；
2. 监听浏览器返回事件：通过popstate事件监听用户点击浏览器返回按钮的操作，触发数据刷新；
3. 组件挂载逻辑：若返回时组件会重新挂载，空依赖的useEffect会在首次挂载时执行，但组件未被卸载（比如单页应用内跳转）时，这种方式不生效。

示例代码：

function BuyTicket(props: BuyTicketProps) {
  const fetchData = () => {
    // 拉取后端数据的逻辑
  };
  const showNotification = () => {
    // 触发通知的逻辑
  };

  useEffect(() => {
    const handleVisibilityChange = () => {
      if (!document.hidden) {
        fetchData();
        showNotification();
      }
    };

    const handlePopState = () => {
      fetchData();
      showNotification();
    };

    window.addEventListener('visibilitychange', handleVisibilityChange);
    window.addEventListener('popstate', handlePopState);

    return () => {
      window.removeEventListener('visibilitychange', handleVisibilityChange);
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);
}

疑问3：无依赖的useEffect应在何时使用？发现它会持续调用，还可能陷入无限循环。 #

无依赖的useEffect（不传递第二个参数或传undefined）会在组件每次渲染完成后都执行——包括首次渲染、每一次状态/属性更新后的渲染。这就是它持续调用甚至无限循环的原因：如果useEffect内部更新了组件状态，状态变化会触发组件重新渲染，渲染完成后又执行useEffect，形成闭环。

几乎没有合理场景需要使用无依赖的useEffect，正确用法是：

• 仅在组件首次挂载和卸载时执行逻辑：传递空依赖数组[]；
• 在特定状态/属性变化时执行逻辑：将该状态/属性加入依赖数组；
• 若必须在每次渲染后执行，务必确保内部操作不会触发组件重新渲染，否则必然引发无限循环。

内容的提问来源于stack exchange，提问作者János