React 中的面向对象状态管理？

Question

我一直在为一个大学项目构建一个国际象棋风格的棋盘游戏，在前端使用 React 让用户与游戏互动，但我现在运行遇到了一些问题当试图实现一个 AI 对手来对抗时。

我基本上想运行将游戏的另一个副本与“真实”游戏放在一起，这样 AI 就可以模拟不同动作的结果并确定最佳选择。我的方法是用 Game class 替换 React 状态，其中包含玩游戏所需的所有属性和方法；这样，就可以同时进行多个游戏，AI 可以镜像主游戏，模拟动作而不影响屏幕上的渲染。

然而，在这样做的过程中，我已经将游戏状态与 React 的状态系统完全分离，因此它不再知道何时根据数据更改重新渲染，我的游戏现在无法玩了。

对于我正在尝试做的事情是否有最佳实践，或者任何人都可以看到我如何解决这个问题？

很高兴提供更多有用的信息或代码片段！

Answer 1

我建议你检查 MobX

Anything that can be derived from the application state, should be. Automatically.

足够简单，您可以使用它为您的 Game class 创建实例

我不知道你的Game class长什么样，但你可以以此为例

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}/>
}

React 中的面向对象状态管理？

Object Oriented state management in React?

reactjs

typescript

react-state