面向对象状态管理中的反应？

Question

我一直在为一个大学项目建立一个国际象棋式的棋盘游戏，使用React作为前端让用户与游戏交互，但我现在遇到了一个小问题，当我试图实现一个人工智能对手来对抗。

我想基本上运行另一个副本的游戏，与“真正的”游戏，这样的AI可以模拟不同动作的结果，并确定最好的选择。我的方法是用包含玩游戏所需的所有属性和方法的Game类替换React状态；这样，可以同时进行多个游戏，AI可以镜像主游戏，模拟动作而不影响呈现到屏幕上的内容。

然而，在这样做时，我已经将游戏状态与React的状态系统完全解耦，这样它就不知道什么时候重新修改数据，而我的游戏现在是不可玩的。

对于我想要做的事情，有什么最佳的实践方法吗?或者有人能看到我如何解决这个问题？

如果有帮助的话，很乐意提供更多的信息或代码片段！

Answer 1

我建议你去看看MobX

可以从应用程序状态派生的任何内容都应该是。是自动的。

很简单，您可以将它用于Game类来创建实例。

我不知道你的Game类是什么样子，但你可以把它作为一个例子

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"

class Game {
    isStarted := false

    constructor() {
        makeAutoObservable(this) //need this for MobX when you create a new instance
    }

    start() {
        isStarted = true
    }
}

下面是我们如何将它与您的组件集成在一起的

import { observer } from "mobx-react-lite"

export const GameView = observer(({ game }) => (<>
   <span>{game.isStarted}</span>
   <button onClick={game.start}>Start game</button>
</>))

export default GameView

上面的组件可以是这样的

const App = () => {
   const game = new Game()
   return <GameView game={game}/>
}