React：直接在组件中改变状态后调用setState会有什么性能损失？

Question

由于使用每个setState *调用组件的render方法，如果我直接修改状态属性，使用空对象调用setState（{}）并让组件完全呈现自身，我想知道性能损失。这在状态管理中有一个有趣的副作用：在这种情况下，状态用作可变对象而不是不可变对象。由于组件将在setState调用之后使用新的状态值重新呈现，因此它将反映视图中的新值。当然，React团队不建议改变状态，因为他们建议将状态视为只读对象，但在某些情况下处理可变对象变得更容易进行状态管理。

我知道这不是最佳做法，可能会立即引起一些人的注意，但我不能停下来询问性能影响或其在典型应用中可能造成的任何其他潜在问题。

请参阅以下示例进行简单演示：https://codesandbox.io/s/k5zy9zw8kv

所以，请让我知道你的想法。

感谢。

*除非在组件中实现了shouldComponentUpdate，否则根据当前状态和nextState值返回false。

PS：我个人认为，对于州管理，最好将MobX用于中型到大型应用。我的问题主要针对相对较小的应用程序。我认为反应和减少使得国家管理不必要地复杂化。作为具有OO背景的开发人员，我希望看到更简单，更优雅的解决方案。

Answer 1

这是一个糟糕的主意。

1。官方不受支持

直接状态变异未记录，不受支持和未经测试，因此React团队可以更改版本的行为（无需测试/记录）。

2。打破生命周期方法

你破坏了componentDidUpdate等几个生命周期方法，因为prevState不会是变异前的状态，所以如果将来需要这些方法，你就放弃使用这些方法的选择。

3。保持状态浅而不是

  

处理可变对象变得更容易进行状态管理

当您拥有深度嵌套状态时，您可能会感觉到这种感觉，因此修改嵌套属性（例如product.quality）需要首先克隆整个对象（例如。products）。

建议您尽可能保持状态浅，以简化状态更改和简化性能优化。例如。如果状态很浅，则将其声明为PureComponent将避免在父组件重新呈现时调用render而不更改子组件。

在您的示例中，您可以将状态移至Product：

class Product {
  state = { quantity: 0 };
  ...
  this.setState(prevState => ({ quantity: prevState.quantity + 1 }));
}