在 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 的清理函数会移除相应的事件监听器。
完整示例
以下是一个完整的示例，展示了如何在子组件中使用 beforeunload 事件监听器：
// Parent Component
function Parent() {
const items = [
{ key: 1, id: 'item1', status: 'pending' },
{ key: 2, id: 'item2', status: 'completed' },
];
return (
<>
{items.map((item) => (
<div key={item.key}>
<Child item={item} />
</div>
))}
</>
);
}
// 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 <div>Child Component for item {props.item.id}</div>;
}注意事项
- beforeunload 事件的兼容性：不同的浏览器对 beforeunload 事件的处理方式可能有所不同。有些浏览器可能会阻止自定义消息的显示，或者完全忽略该事件。
- 性能影响：频繁地注册和移除事件监听器可能会对性能产生一定的影响。请谨慎使用，并确保在不需要监听时及时移除监听器。
- 异步操作：在 beforeunload 事件处理函数中执行异步操作时，需要注意浏览器可能会在操作完成之前终止页面卸载。可以使用 navigator.sendBeacon 方法来发送数据，该方法保证在页面卸载后也会发送数据。
总结
通过将 useEffect 的依赖项设置为组件的关键 props，我们可以确保每个子组件都注册一个独立的 beforeunload 事件监听器，并在组件卸载时正确地移除该监听器。这可以避免事件监听器重复触发的问题，并确保所有组件都能在页面卸载前执行相应的操作。同时，需要注意 beforeunload 事件的兼容性和性能影响，并谨慎使用。
