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);
}, []);

addEventListener在useEffect挂钩中不起作用

1 个答案: