我应该在React中存储大对象的状态吗?

Question

我有一个非常大的Game对象，它完全决定了游戏的状态，包括被渲染和不被渲染的数据。它的嵌套值经常改变。

我是否应该将这个非常大的对象存储在状态…

const [game, setGame] = useState(new Game()) // Very large Game object

和使用setGame的每一个小更新的游戏?例如,

function playerDamage(dmg) {
const nextState = game.copy();
nextState.player.health -= dmg;
setGame(nextState);
}

在我看来，制作Game的副本并使用setGame对Game进行每一点更改是非常低效的。我在这个假设中是正确的，还是React和TS/JS在"引擎盖下"处理得很好?

我想重新表述这个问题:在React状态对象中频繁更新深度嵌套值的最佳方法是什么?

Answer 1

也许你应该尝试Redux来管理状态，并使用store来管理游戏状态。

https://react-redux.js.org/

Answer 2

是的，如果您复制整个对象:

，那么您当前的方法可能非常低效

const nextState = game.copy();

如果game那么大，那么频繁地进行如此深的复制可能是一个问题。但是，对于这种特殊情况，有一个简单的解决方案:不要复制整个内容，只复制需要更改的对象。只有两个对象需要更改(加上新的final外部状态对象)，所以只更改它们，而不是递归地复制所有内容。

function playerDamage(dmg) {
setGame({
...game,
player: {
...game.player,
health: game.player.health - dmg
}
});
}

这个版本的playerDamage函数会非常便宜。