React 中可变状态的缺点是什么?

IT技术 reactjs
2021-05-22 18:16:42

我有一个带有顶级组件和许多嵌套子组件的 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 风格。

问题:我还缺少其他任何缺点吗?

1个回答

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

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

React 简单且非常灵活,因此您的方法会奏效。我不能推荐它。