我有一个事件侦听器,我在初始页面渲染时在组件内创建它,如下所示:
useEffect(() => {
// once response recieved from getCommentTimestamp, invoke postComment
window.addEventListener('message', (e) => {
const message = e.data;
if (message.split('/')[0] === 'timeStamp') {
const timeStamp = message.split('/')[1];
console.log(timeStamp);
}
});
}, []);
事件监听器工作正常。当我将消息发送到窗口时,我得到了想要记录到控制台的数据。但我担心在这里反应抛出误报可能表明存在其他类型的问题。我这里的实现有问题吗?在 useEffect 挂钩中创建事件侦听器是不好的做法吗?
在 useEffect 挂钩中使用事件侦听器通常是可接受的做法,但有一些注意事项: 内存泄漏:确保在组件卸载时删除事件侦听器,以避免内存泄漏问题。您可以从 useEffect 返回一个清理函数,以在组件卸载时执行删除操作。 依赖数组:如果事件侦听器的回调函数依赖于 useEffect 外部的变量或状态,请确保将这些变量包含在依赖数组中,以便正确捕获最新值。 性能优化:如果事件监听器只需要在挂载时设置一次并在卸载时删除一次,可以将空数组[]作为useEffect的第二个参数传递。这样,事件侦听器将在组件安装期间仅设置一次,并在卸载期间删除。 在您的代码中,您似乎已经通过传递一个空数组 [] 作为 useEffect 的依赖数组来考虑第三点,这是一个很好的做法。只需确保在组件卸载时删除事件侦听器并根据需要优化性能即可。您的实施看起来很合理。