React切换语言时如何防止事件监听器重复注册

事件重复触发来自三个实现漏洞：

• useEffect没有编写清理逻辑：语言切换触发组件重挂载/重渲染时，之前绑定的原生点击事件、延迟执行的setTimeout都没有被销毁，新旧监听器同时存在就会触发多次
• initialized标记赋值在setTimeout回调内：如果500ms延迟还没走完就触发了语言切换，标记位还是false，会重复进入事件绑定分支
• 绑定事件时用了匿名箭头函数，后续就算想移除监听器也找不到对应的函数引用，没法精准解绑

直接替换原有Footer组件的逻辑即可：

import { shape, string } from 'prop-types';
import React, { useEffect, useRef } from 'react';

import { useWindowSize } from '@magento/peregrine/lib/hooks/useWindowSize';
import { useStyle } from '@magento/venia-ui/lib/classify';
import CmsBlock from '@magento/venia-ui/lib/components/CmsBlock';

import defaultClasses from './footer.module.css';

const Footer = ({ classes }) => {
    const isMobile = useWindowSize().innerWidth < 1024;
    // 存储定时器ID和绑定的事件处理函数，方便统一清理
    const timerRef = useRef(null);
    const boundHandlersRef = useRef([]);

    useEffect(() => {
        // 每次effect执行前，先清理上一轮遗留的定时器、事件监听器
        if (timerRef.current) {
            clearTimeout(timerRef.current);
            timerRef.current = null;
        }
        boundHandlersRef.current.forEach(({ element, handler }) => {
            element.removeEventListener('click', handler);
        });
        boundHandlersRef.current = [];

        // 非移动端直接重置tab样式，不需要绑定点击事件
        if (!isMobile) {
            const colLinks = document.querySelectorAll('.col-links');
            colLinks.forEach(el => el.classList.remove('active-tab'));
            return;
        }

        // 移动端延迟绑定交互
        timerRef.current = setTimeout(() => {
            const buttonElements = document.querySelectorAll('.col-links');
            buttonElements.forEach(element => {
                const clickHandler = () => {
                    console.log("clicked");
                    element.classList.toggle('active-tab');
                };
                element.addEventListener('click', clickHandler);
                // 存储元素和对应处理函数的引用，用于后续解绑
                boundHandlersRef.current.push({
                    element,
                    handler: clickHandler
                });
            });
            timerRef.current = null;
        }, 500);

        // effect清理函数：组件卸载/依赖变更时自动执行
        return () => {
            if (timerRef.current) {
                clearTimeout(timerRef.current);
            }
            boundHandlersRef.current.forEach(({ element, handler }) => {
                element.removeEventListener('click', handler);
            });
            boundHandlersRef.current = [];
        };
    }, [isMobile]);

    const rootClasses = useStyle(classes, defaultClasses);

    return (
        <footer id="footer" className={rootClasses.root}>
            <div className="footerWrapper">
                <CmsBlock identifiers="footer" />
            </div>
        </footer>
    );
};

export default Footer;

Footer.propTypes = {
    classes: shape({
        root: string
    })
};

• 移除了原有的initialized ref标记，改用useEffect自带的清理机制做防重，不存在时序漏洞
• 所有绑定的事件监听器、创建的定时器都会在effect执行前、组件卸载时被彻底清理，不会残留旧的事件绑定
• 事件处理函数单独存储引用，保证addEventListener和removeEventListener传入的是同一个函数，解绑操作可以正常生效
• 非移动端场景下直接重置tab样式，不需要走延迟逻辑

补充优化建议：如果后续迭代可以控制.col-links元素的渲染逻辑，更推荐用React合成事件代替原生DOM绑定，从根源上避免手动管理监听器的问题。

内容的提问来源于stack exchange，提问作者LosMos