我有一个关于ReactJS的问题。我在使用VueJS制作游戏UI，我想使用ReactJS来构建游戏中的UI，但我想保持逻辑与react树的解耦，以减少性能问题。例如，我的数据/实体存储在ReactJS组件之外。

• 假设我有一个循环，其中我每帧更新一次类A的值，现在我想在ReactJS中显示该值，但类A没有在React组件中示例化。

以下代码的示例

class Test {
  private health: number
  constructor() {
    this.health = 100
  }

  tick = () => {
    this.health -= 1
  }

  public getHealth = () => this.health 
}

const instance = new Test

// Somewhere in rAF ticker
...
   instance.tick()
...

现在我想在ReactJS中对健康变化做出React，

const Health = () => {
    const health = useRef(instance)
    
     // Use effect does not trigger on health changes 

    return <p> Health: {instance.health.current}</p>
}
export default Health

在VueJS中有一个功能，在对象的情况下，我可以将外部Vue组件属性标记为ref()或reactive。ReactJS中是否有类似的功能？
为什么？
在我的例子中，我将有很多实体和值，它们将改变每一帧，将所有这些东西 Package 在组件中将是非常昂贵的，也许reactJS对我来说不是一个好的框架。