缺点直接改变状态，forceUpdate（）vs setState

Question

反应文档说Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable...但是，当我根本不使用setState（）时，这是一个非问题。

我能想到的唯一的缺点是：

• 不能使用shouldComponentUpdate/componentWillUpdate/componentDidUpdate比较新旧状态。

• 对其他人来说，维护可能会更困难。因为这不是标准的做事方式。

但是否有任何其他缺点不使用的setState（）和直接突变状态？

---

编辑：我已经删除了我的推理为什么我吸引到这一想法。我知道这是一种反模式，我知道这可能不是最好的方式。但这个问题全是关于“为什么”。

EDIT2：这里也关键词是other在... are there any other disadvantages ...

Answer 1

你不应该直接变异的状态。 setState的异步特性有办法绕过它。 setState提供您可以使用的callback。

还forceUpdate完全绕过shouldComponentUpdate这不是一个好的模式，特别是当使用React.PureComponent做你的道具的浅层比较。

而且你不应该使用反模式，而试图解决您的问题，通过文档

使用setState的另一个优点是，你可以用这个 模式松动是比较你previous建议的正确方法和currentState因为你 制造的物体mutable尤其是在你的生命周期功能

缺点设置状态直接是阵营的生命周期 方法 - shouldComponentUpdate()，componentWillUpdate(), componentDidUpdate() - 取决于调用状态转换 setState()。如果您直接更改状态并将setState()与 作为空对象，则不能再实现这些方法。

你也可以亲自知道你的代码交互与之反应以这样的方式，这些过度写入或其他问题都不会发生，但你要创建的情况下其他开发商或将来的更新可能会突然发现自己同时，他们开始按照正确的方法

使用的setState突变状态怪异的或微妙的问题

class App extends React.Component { 
 
    state = { 
 
     counter: 0 
 
    } 
 
    updateCounter =() => { 
 
    this.setState(prevState => ({counter: prevState.counter + 1})); 
 
    } 
 
    componentWillUpdate(nextProps, nextState){ 
 
    console.log(this.state.counter === nextState.counter); 
 
    } 
 
    
 
    componentDidUpdate(prevProps, prevState) { 
 
    console.log(this.state.counter === prevState.counter); 
 
    } 
 
    render() { 
 
     return (
 
     <div> 
 
      {this.state.counter} 
 
      <button onClick={this.updateCounter}>Increment</button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

直接变异状态

class App extends React.Component { 
 
    state = { 
 
     counter: 0 
 
    } 
 
    updateCounter =() => { 
 
    this.state.counter = this.state.counter + 1; 
 
    this.forceUpdate(); 
 
    } 
 
    componentWillUpdate(nextProps, nextState){ 
 
    console.log(this.state.counter === nextState.counter); 
 
    } 
 
    
 
    componentDidUpdate(prevProps, prevState) { 
 
    console.log(this.state.counter === prevState.counter); 
 
    } 
 
    render() { 
 
     return (
 
     <div> 
 
      {this.state.counter} 
 
      <button onClick={this.updateCounter}>Increment</button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>