为何YTPlayer组件中setPlayer触发重渲染却未引发无限循环？

组件代码 #

const YTPlayer = ({playlist}) => {
      const [player,setPlayer] = useState(false)
      const loadPlaylist = playlist => {
        player.loadPlaylist(playlist);
      };
      const play = () => {
        loadPlaylist(playlist);
        player.playVideo();
      };
      const pause = () => {
        player.pauseVideo();
      };

      const onReady = event => setPlayer(event.target)
      return <YoutubeIFrame onReady={onReady} /> 
}

问题描述 #

YouTube iframe加载完成后会调用传入的onReady回调，该回调执行setPlayer更新状态。按逻辑YTPlayer组件应重渲染，销毁旧iframe并创建新iframe，进而再次触发onReady，理应引发无限循环。但实际组件仅重渲染5次后便停止，且play、pause、loadPlaylist等功能均正常运行，请问我的思路存在什么误区？

误区解析与原因说明 #

1. 对React DOM复用逻辑的误解
   你默认认为组件重渲染就会销毁并重建iframe，但React的DOM diff算法会尽可能复用现有DOM节点：当组件重渲染时，React会对比新旧元素的类型和核心属性（比如iframe的src、id等），如果这些关键属性没有变化，React会直接复用已存在的iframe节点，不会重新创建，自然也就不会再次触发onReady回调，所以不会出现无限循环。

2. 重渲染5次的原因
   这基本是React**严格模式（Strict Mode）**导致的。在开发环境的严格模式下，React会刻意重复调用状态更新、组件渲染等操作，以此帮开发者发现潜在的副作用问题。这种重复执行是开发环境特有的，生产环境不会出现。但因为iframe没有被重建，所以onReady不会反复触发，最终重渲染几次后就停止了。

3. 额外的代码隐患提示
   你的loadPlaylist、play等函数直接使用了player状态变量，这里存在闭包陷阱：当组件后续因其他状态更新重渲染时，这些函数会重新创建并捕获当前渲染周期的player值。虽然当前代码功能正常，但如果后续有其他状态变化，可能会导致函数拿到旧的player引用。建议用useCallback包裹这些函数并将player加入依赖数组，或者改用useRef存储player实例，这样能更稳定地获取到最新的播放器实例。

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