Reactjs 在React中，突变状态的缺点是什么？

我有一个React应用程序，它有一个顶级组件和许多嵌套的子组件。顶级组件是唯一具有状态的组件。该状态采用单个变量的形式：

this.state = {
  g: new BlackJackGame()
}

g包含一个复杂的数据结构：

class BlackJackGame{
   playerHand = []; 
   dealerHand = [];
   deck = [ /* initially 52 cards * ]; 
   ....
}

g还包含三种方法来改变它的状态：

g.deal(): take 4 cards from deck and add them to playerHand and dealerHand (2 cards each)
g.hit(): take 1 card from deck and add it to playerHand
g.stay(): take cards from deck and add to dealerHand while dealerHand's points < 17.

我知道推荐的方法是不变异状态。但事实是，这种方法非常有效。我已经用过很多次了。它似乎工作得很好。据我所知，这些是唯一的缺点：

如果我需要在shouldComponentUpdate中执行脏检查（我不需要），我将不得不使用deepEquals而不是指针比较

如果我需要撤销（我不需要），它将更难实现

切换到Redux可能会很痛苦，因为Redux会迫使我使用功能性的、不变的样式，而不是OO样式

---

问题：我还缺少其他缺点吗？

当调用

setState

更新状态时，组件会自动调用

shouldComponentUpdate

并在需要时重新加载

如果直接改变状态，则在以某种方式强制渲染之前，更改不会自动反映在UI中。这是绕过React状态管理，实现您自己的状态管理

---

React很简单，而且非常灵活，因此您的方法将起作用。不过，我不推荐这样做。

直接操纵此.state会绕过React的状态管理，这可能会有潜在的危险，因为之后调用setState（）可能会替换您所做的变异。如何做到这一点？什么代码会重现这种行为？你能给出一个具体的场景吗？例如，DaveFord，你不能实现

shouldComponentUpdate

，因为

nextState

和

this。state

将指向同一个对象，因此它们是相同的，你不知道发生了什么变化。

onDealClick = event => {
  this.state.g.deal();
  this.setState({ g: this.state.g });
};