reactjs - React 中的变异状态有哪些缺点？

Question

我有一个 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.

onDealClick 看起来像这样:

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

我知道推荐的方法是不改变状态。但事实是，这效果非常好。而且我已经多次使用过这种模式。而且看起来效果很好。据我所知，这些是唯一的缺点:

1. 如果我需要在 shouldComponentUpdate 中执行脏检查(我不需要)，我将不得不使用 deepEquals 而不是指针比较。
2. 如果我需要撤消(我不需要)，那么实现起来会更困难。
3. 切换到 Redux 可能会很痛苦，因为 Redux 会迫使我使用函数式、不可变的风格，而不是 OO 风格。

问题:还有其他我忽略的缺点吗？

Answer 1

当调用setState来更新状态时，组件会自动调用shouldComponentUpdate并在需要时重新渲染。

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

React 简单且非常灵活，因此您的方式将会起作用。但我不能推荐它。