遇到了一个有趣的问题

<FieldEditor rect={rect} visible={editStatus} onClose={() => setEditStatus(false)} />

子组件

const [scrollY, setScrollY] = useState<number>(0);

    useEffect(() => {
        const listener = (e: MouseEvent) => {
            const el = (e.target as HTMLDivElement).closest('.fielde-ditor__wrapper');
            if (el === null) {
                onClose();
            }
        };
        window.addEventListener('click', listener);
        return () => {
            console.log('destroy');
        };
    }, []);

if (!visible) return null;

return createPortal(
        <div className="fielde-ditor__wrapper">
            {Editor}
            {Panel}
        </div>,
        document.body,
    );

当visible 为false时 useEffect内的清理函数没有正常执行

猜测是组件没有正常卸载

 { editStatus && <FieldEditor rect={rect} onClose={() => setEditStatus(false)} />}

这样写后组件能够正常卸载了并执行清理函数