Next.js切换clipLink时playerRef重载问题（dev与prod差异）

问题根源在于你把clipLink直接绑定到了<YouTube>组件的videoId属性上。当clipLink变化时，React会判定该组件的核心props发生变更，生产模式下会直接卸载旧播放器实例并重新挂载新的，导致播放器重载；而开发模式下受React严格模式、热更新等机制影响，旧实例被保留，所以表现正常。你写的playerRef.current.loadVideoById(clipLink)逻辑本身没问题，但组件重建后playerRef.current已变成新实例，旧切换逻辑完全没起到作用。

核心思路是不让<YouTube>组件因视频ID变化而重新挂载，始终复用同一个播放器实例，完全通过ref调用YouTube原生API切换视频。

修改后的子组件代码 #

import { useEffect, useRef } from "react";
import YouTube, { YouTubeProps } from 'react-youtube';

const ChildPage = ({ clipLink, playerRef }) => {
  // 标记是否为首次加载，避免重复触发初始逻辑
  const isFirstLoad = useRef(true);

  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
    playerRef.current = event.target;
    // 首次加载时直接播放传入的初始视频
    if (clipLink) {
      event.target.loadVideoById(clipLink);
      event.target.setVolume(30);
    }
  };

  const onPlayerStateChange: YouTubeProps['onStateChange'] = (event) => {
    const playerState = event.data;
    switch (playerState) {
      case 0:
        event.target.playVideo();
        break;
      default:
        console.log('Player state changed to:', playerState);
    }
  };

  const opts: YouTubeProps['opts'] = {
    playerVars: {
      autoplay: 0, // 关闭自动播放，由我们手动控制播放时机
      controls: 1,
      fs: 0,
      modestbranding: 1,
      rel: 0,
      iv_load_policy: 3,
    },
  };

  useEffect(() => {
    // 非首次加载时，通过ref切换视频
    if (!isFirstLoad.current && clipLink && playerRef.current) {
      try {
        playerRef.current.loadVideoById(clipLink);
        playerRef.current.playVideo();
        playerRef.current.setVolume(30);
      } catch (error) {
        console.error('Error loading video -', error);
      }
    }
    // 首次加载完成后更新标记
    isFirstLoad.current = false;
  }, [clipLink, playerRef]);

  // 使用固定值作为videoId，避免组件因ID变化重建
  return (
    <>
      <YouTube
        videoId="" // 也可以填一个占位视频ID，比如"dQw4w9WgXcQ"
        opts={opts}
        onReady={onPlayerReady}
        onStateChange={onPlayerStateChange}
      />
    </>
  );
};

export default ChildPage;

关键调整说明 #

• 将autoplay设为0，避免初始加载时自动播放占位内容，完全由我们的逻辑控制播放
• 新增isFirstLoad ref，区分首次加载和后续视频切换场景，确保初始视频能正确加载
• <YouTube>组件的videoId用固定值，彻底避免组件因ID变化被卸载重建

修改后，无论开发还是生产模式，播放器实例都会被稳定复用，切换视频时不会出现重载问题。

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