javascript - addEventListener 在 useEffect Hook 中不起作用

Question

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

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 = (event: FocusEvent) => {
    document.title = "focused";
}; 
window.addEventListener("focus", focusFunction);

工作得很好。

附带问题:const focusFunction 和 const blurFunction 是否在每次渲染的函数中构建？我假设如果是这样，它们应该从组件中移除以避免不必要的开销？

Answer 1

需要返回一个函数，否则监听器会被立即移除。

组件卸载时调用该函数

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