反应中突变状态的弊端是什么



我有一个带有顶级组件和许多嵌套子组件的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. 如果我需要在shossponentupdate中执行肮脏的检查(我不(,我将不得不使用deepquequals而不是指针比较。
  2. 如果我需要撤消(我不(,则很难实施。
  3. 切换到Redux可能很痛苦,因为Redux会迫使我使用功能性,不可变的风格而不是OO风格。

问题:我还有其他缺点吗?

在调用setState更新状态时,组件会在需要时自动调用shouldComponentUpdate和Rerenders。

如果直接突变状态,则不会自动反映在UI中,直到您以某种方式强制渲染。这是在绕过反应状态管理,实施您自己的州管理。

反应很简单且非常灵活,因此您的方式将起作用。我不推荐。

最新更新