解决 React 组件卸载前事件监听器重复触发的问题

在 React 应用中，我们经常需要在页面关闭或刷新前执行一些操作，例如保存用户数据或发送统计信息。beforeunload 事件是一个理想的选择。然而，当在由 map 函数动态生成的组件中使用 beforeunload 事件监听器时，可能会遇到一个问题：只有第一个组件的监听器被触发。这是因为所有的子组件都共享同一个 window 对象，并且它们都在 beforeunload 事件上注册了回调函数。如果没有正确处理，后续注册的回调会覆盖之前的回调，导致只有最后一个注册的组件能够执行其逻辑。

问题分析

问题的根源在于 useEffect 的依赖项。在原始代码中，useEffect 的依赖项为空数组 []。这意味着 useEffect 只会在组件挂载时执行一次，并且每次执行时都会注册同一个 handleWindowClose 函数。由于所有子组件都在同一个 window 对象上注册了相同的回调函数，最终只有最后一个组件注册的回调函数会生效。

解决方案

为了解决这个问题，我们需要确保每个子组件都注册一个独立的回调函数，并且在组件卸载时正确地移除该回调函数。这可以通过将 props.item.id 和 props.item.status 添加到 useEffect 的依赖项数组中来实现。

useEffect(() => {
  const handleWindowClose = () => {
    post(props.item.id, props.item.status);
  };

  window.addEventListener('beforeunload', handleWindowClose);

  return () => {
    window.removeEventListener('beforeunload', handleWindowClose);
  };
}, [props.item.id, props.item.status]);

通过将 props.item.id 和 props.item.status 添加到依赖项数组中，useEffect 会在这些值发生变化时重新执行。这意味着每个子组件都会注册一个基于其自身 props.item 的唯一回调函数。当组件卸载时，useEffect 的清理函数会移除相应的事件监听器。

Skywork

昆仑万维推出的通用AI智能体平台

下载

完整示例

以下是一个完整的示例，展示了如何在子组件中使用 beforeunload 事件监听器：

// Parent Component
function Parent() {
  const items = [
    { key: 1, id: 'item1', status: 'pending' },
    { key: 2, id: 'item2', status: 'completed' },
  ];

  return (
    <>
      {items.map((item) => (
        

          
        
      ))}
    
  );
}

// Child Component
function Child(props) {
  useEffect(() => {
    const handleWindowClose = () => {
      console.log(`Sending request for item ${props.item.id} with status ${props.item.status}`);
      // Replace console.log with your actual post request
      // post(props.item.id, props.item.status);
    };

    window.addEventListener('beforeunload', handleWindowClose);

    return () => {
      window.removeEventListener('beforeunload', handleWindowClose);
    };
  }, [props.item.id, props.item.status]);

  return 
Child Component for item {props.item.id}
;
}

注意事项

• beforeunload 事件的兼容性：不同的浏览器对 beforeunload 事件的处理方式可能有所不同。有些浏览器可能会阻止自定义消息的显示，或者完全忽略该事件。
• 性能影响：频繁地注册和移除事件监听器可能会对性能产生一定的影响。请谨慎使用，并确保在不需要监听时及时移除监听器。
• 异步操作：在 beforeunload 事件处理函数中执行异步操作时，需要注意浏览器可能会在操作完成之前终止页面卸载。可以使用 navigator.sendBeacon 方法来发送数据，该方法保证在页面卸载后也会发送数据。

总结

通过将 useEffect 的依赖项设置为组件的关键 props，我们可以确保每个子组件都注册一个独立的 beforeunload 事件监听器，并在组件卸载时正确地移除该监听器。这可以避免事件监听器重复触发的问题，并确保所有组件都能在页面卸载前执行相应的操作。同时，需要注意 beforeunload 事件的兼容性和性能影响，并谨慎使用。