如何在React组件中嵌入Twitch对象且避免每次渲染都调用New

实现逻辑 #

要避免每次组件渲染重复初始化实例，核心是把创建完成的Embed实例存储在不受组件渲染影响的持久化存储空间中，每次渲染前先判断实例是否已存在，存在就直接复用，不存在再执行初始化逻辑。

React框架代码示例 #

import { useRef, useEffect } from 'react'

const TwitchPlayer = () => {
  // 存储播放器容器DOM引用，避免固定ID冲突
  const playerContainerRef = useRef(null)
  // 存储Twitch.Embed实例，渲染时不会被重置
  const twitchInstanceRef = useRef(null)

  useEffect(() => {
    // 实例已存在直接跳过初始化
    if (twitchInstanceRef.current) return

    // 仅首次挂载时初始化实例
    twitchInstanceRef.current = new Twitch.Embed(playerContainerRef.current, {
      width: 854,
      height: 480,
      channel: "monstercat",
      parent: [window.location.host]
    })

    // 组件卸载时销毁实例释放内存
    return () => {
      twitchInstanceRef.current?.destroy()
      twitchInstanceRef.current = null
    }
  }, [])

  // 动态修改配置直接调用实例方法，无需重建
  const changeChannel = (newChannel) => {
    twitchInstanceRef.current?.setChannel(newChannel)
  }

  return <div ref={playerContainerRef}></div>
}

export default TwitchPlayer

其他框架通用方案 #

如果使用Vue、Angular等其他框架，逻辑完全一致：

• 选择框架提供的持久化存储实例的API（比如Vue的ref/shallowRef、Angular的类属性）存储Embed实例
• 仅在组件首次挂载的生命周期钩子中执行初始化逻辑
• 组件卸载钩子中调用实例的destroy方法清理
• 动态调整参数直接调用Twitch.Embed暴露的实例方法即可，不需要重建实例

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