使用Next.js集成Preline：动态页面为何需重复初始化组件？

在Next.js框架中集成Preline组件库时遇到一个问题：动态加载的页面里必须重复初始化HSDropdown组件。有人建议用MutationObserver监听DOM变化来自动初始化，但我觉得这不太合理——毕竟Next.js是SPA，理论上应该只初始化一次就够了。想确认下：

• 这种用MutationObserver的方式是不是常规实现方案？
• 是不是我的操作哪里出错了？

当前的初始化代码如下：

// utils/preline.ts

let prelineInitialized = false;

export const initPreline = () => {
  if (typeof window === 'undefined' || prelineInitialized) return;

  import('preline/preline').then(({ HSDropdown }) => {
    const initDropdowns = () => {
      document.querySelectorAll('.hs-dropdown').forEach(el => {
        if (!el.classList.contains('hs-dropdown-initialized')) {
          new HSDropdown(el);
          el.classList.add('hs-dropdown-initialized');
        }
      });
    };

    // Initial initialization
    initDropdowns();

    // Set up MutationObserver to watch for new dropdowns
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'childList') {
          mutation.addedNodes.forEach((node) => {
            if (node instanceof HTMLElement) {
              if (node.classList.contains('hs-dropdown') && !node.classList.contains('hs-dropdown-initialized')) {
                new HSDropdown(el);
                el.classList.add('hs-dropdown-initialized');
              } else {
                node.querySelectorAll('.hs-dropdown:not(.hs-dropdown-initialized)').forEach(el => {
                  new HSDropdown(el);
                  el.classList.add('hs-dropdown-initialized');
                });
              }
            }
          });
        }
      });
    });

    observer.observe(document.body, { childList: true, subtree: true });

    prelineInitialized = true;
  });
};

问题根源 #

Next.js虽然是SPA，但动态路由组件、SSR/SSG生成的动态内容、或者用useEffect/条件渲染新增的DOM元素，都是在初始页面加载后才插入到DOM中的。而Preline的HSDropdown需要直接绑定DOM元素的事件，初始初始化只会处理当时存在的DOM，对后续新增的元素无效——这就是为什么你在动态页面里需要重新初始化的原因。

关于MutationObserver的合理性 #

用MutationObserver确实是一种可行的方案，但不算最优解。它的问题在于全局监听DOM变化，会带来不必要的性能开销，尤其是页面DOM频繁更新时。

更合理的实现方式 #

1. 组件层面局部初始化

不要全局监听，而是在使用HSDropdown的组件里，在DOM挂载完成后单独初始化：

// components/MyDropdown.tsx
import { useEffect, useRef } from 'react';

export default function MyDropdown() {
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!dropdownRef.current) return;
    
    import('preline/preline').then(({ HSDropdown }) => {
      new HSDropdown(dropdownRef.current);
    });
  }, []);

  return (
    <div ref={dropdownRef} className="hs-dropdown">
      {/* 下拉内容 */}
    </div>
  );
}

这种方式精准控制，只初始化当前组件内的下拉，没有多余性能损耗。

2. 利用Next.js路由事件触发全局初始化

如果不想每个组件都写一遍，可以监听Next.js的路由切换事件，在页面切换完成后重新初始化所有未初始化的下拉：

// utils/preline.ts
import { useRouter } from 'next/router';
import { useEffect } from 'react';

let prelineLoaded = false;
let HSDropdown: any;

export const initPreline = async () => {
  if (typeof window === 'undefined') return;
  if (!prelineLoaded) {
    const module = await import('preline/preline');
    HSDropdown = module.HSDropdown;
    prelineLoaded = true;
  }

  document.querySelectorAll('.hs-dropdown:not(.hs-dropdown-initialized)').forEach(el => {
    new HSDropdown(el);
    el.classList.add('hs-dropdown-initialized');
  });
};

// 自定义hooks，在_app.tsx中使用
export const usePrelineInit = () => {
  const router = useRouter();

  useEffect(() => {
    // 初始加载时初始化
    initPreline();

    // 路由切换完成后重新初始化
    const handleRouteChange = () => {
      initPreline();
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router]);
};

然后在_app.tsx中引入这个hooks：

// pages/_app.tsx
import { usePrelineInit } from '../utils/preline';

export default function App({ Component, pageProps }) {
  usePrelineInit();
  return <Component {...pageProps} />;
}

这种方式比MutationObserver更高效，因为只会在路由切换完成后触发，而不是监听所有DOM变化。

3. 检查Preline的自动初始化配置

有些版本的Preline支持自动初始化（比如调用HSStaticMethods.autoInit()），可以查看官方文档确认是否有这个API，直接调用全局自动初始化，可能会解决动态元素的问题。

总结 #

• 你当前用MutationObserver的方式是可行的，但不是最优解；
• 问题出在动态内容是初始DOM加载后才生成的，初始初始化覆盖不到；
• 优先选择组件层面初始化或路由事件触发初始化，比全局监听DOM更高效。

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