Javascript addEventListener在useEffect挂钩中不起作用

以下是一个组件，其功能部分是在页面聚焦和模糊时更改窗口标题。它不起作用

const ATitleChangingComponent = () => {

    const focusFunction = (event: FocusEvent) => {
            document.title = "focused";
    };
    const blurFunction = (event: FocusEvent) => {
            document.title = "blurred";
    };


    useEffect(() => {
            window.addEventListener("focus", focusFunction);
            return window.removeEventListener("focus", focusFunction);
    }, []);

    useEffect(() => {
            window.addEventListener("blur", blurFunction);
            return window.removeEventListener("blur", blurFunction);
    }, []);

    return <p>some unimportant jsx</p>
};

很好用

---

附带问题：const focusFunction和const blurFunction是否在每个渲染函数中构造？我假设如果是这样，应该将它们从组件中取出以避免不必要的开销？

需要返回一个函数，否则监听器将立即被删除

该函数在组件卸载时被调用

useEffect(() => {
        window.addEventListener("blur", blurFunction);
        return () => window.removeEventListener("blur", blurFunction);
}, []);

---

需要返回一个函数，否则侦听器将立即被删除

该函数在组件卸载时被调用

useEffect(() => {
        window.addEventListener("blur", blurFunction);
        return () => window.removeEventListener("blur", blurFunction);
}, []);

---

window.addEventListenerfocus，focus函数；return window.removeEventListenerfocus，focus函数@epascarello返回一个函数，该函数将用于在组件卸载后进行清理。我应该返回=>window.remove…，但是此更改仍然无法使其工作。window.addEventListenerfocus，focusFunction；return window.removeEventListenerfocus，focus函数@epascarello返回一个函数，该函数将用于在组件卸载后进行清理。我应该返回=>window.remove…，但是这个更改仍然不能使它工作。只是意识到了这一点。但是，在更改之后，它仍然不起作用。不确定为什么…对窗口上的其他侦听器执行了相同的操作。演示将帮助您更改问题中的代码就足够了。在原始代码中，有人更改了窗口。addEvent。。。记录。添加。。。这是第二件破坏它的事情。@removeEventListener问题中的代码中的bot19在每次调用useEffect时都会被调用返回func和func之间的差异，这就是代码的问题所在。charlietfl的代码更正了它-useEffect返回一个只在最后一次渲染时由React内部调用的函数。@bot19是的，这是一个钩子。它在组件卸载时被调用，以允许您执行诸如删除事件侦听器等操作。但是，在更改之后，它仍然不起作用。不确定为什么…对窗口上的其他侦听器执行了相同的操作。演示将帮助您更改问题中的代码就足够了。在原始代码中，有人更改了窗口。addEvent。。。记录。添加。。。这是第二件破坏它的事情。@removeEventListener问题中的代码中的bot19在每次调用useEffect时都会被调用返回func和func之间的差异，这就是代码的问题所在。charlietfl的代码更正了它-useEffect返回一个只在最后一次渲染时由React内部调用的函数。@bot19是的，这是一个钩子。它在组件卸载时被调用，以允许您执行诸如删除事件侦听器等操作。