addEventListener在useEffect掛鈎中不起作用

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 blurFunction是否分別構造了const focusFunction和const blurFunction ？ 我認為如果這樣，應該將它們從組件中取出以避免不必要的開銷？

Answer 1

需要返回一個函數，否則監聽器會立即被刪除。

組件卸載時調用該函數

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