是否有必要"window.removeEventListener('unload')"？

Question

我正在存储最新的输入数据值，以便在用户离开网页之前localStorage。写入localStorage是在window.onunload上执行的。

useEffect(() => {
const updater = () => {
updateStorageValue('last_input', input);
};
window.addEventListener('unload', updater);
return () => window.removeEventListener('unload', updater);
}, [input]);

假设组件(使用此useEffect的位置(是在用户关闭/刷新选项卡/窗口时挂载的。

我只是好奇，在整个网页停止工作时，删除unload事件是否有任何影响。

Answer 1

React 在关闭/刷新页面时不会卸载应用程序组件。所以你的问题的答案是：不，它没有任何效果。

但是，如果它是存在于页面上的普通组件(而不是在退出之前安装(，那么清理函数应该在那里删除上一个unload事件侦听器，然后再添加下一个。

您的useEffect将删除unload事件侦听器，并在input更改时添加新的侦听器。但是，如果删除清理功能，则事件侦听器的数量将与input更新一样多unload事件侦听器。

例如，假设input值按以下顺序更改：

'R'
'Re'
'Rea'
'Reac'
'React'

在这种情况下，将在unload事件上调用这些函数：

updateStorageValue('last_input', 'R');
updateStorageValue('last_input', 'Re');
updateStorageValue('last_input', 'Rea');
updateStorageValue('last_input', 'Reac');
updateStorageValue('last_input', 'React');