直接改变状态和forceUpdate()与setState的缺点

2023-12-07

React 文档说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比较新旧状态。
可能会让其他人的可维护性变得更加困难。因为这不是做事的标准方式。

但有没有other不使用 setState() 并直接改变状态有什么缺点？

EDIT:我已经删除了我被这个想法吸引的原因。我知道这是一种反模式，而且我知道这可能不是最好的方法。但这个问题都是关于“为什么”。

EDIT2:这里的关键词也是other in ... are there any other disadvantages ...

您不应该直接改变状态。 setState 的异步性质有多种方法可以解决它。setState提供了一个callback您可以使用。

另外forceUpdate完全绕过了shouldComponentUpdate这不是一个好的模式，尤其是在使用时React.PureComponent这对你的道具进行了浅层比较。

另外，您不应该使用反模式，而是尝试按照文档建议的正确方式解决您的问题

使用的另一个优点setState你可能会失去这个模式是比较你的previous和currentState自从你制造了物体mutable特别是在你的生命周期函数中

直接设置状态的一个缺点是React的生命周期方法 -shouldComponentUpdate(), componentWillUpdate(), componentDidUpdate()- 取决于调用的状态转换setState()。如果直接改变状态并调用setState()和一个空对象，你不能再实现这些方法。

另外，您个人可能知道您的代码与 React 交互的方式不会发生这些覆盖或其他问题，但您正在创建一种情况，其他开发人员或未来的更新可能会突然发现自己遇到奇怪或微妙的问题他们开始遵循正确的方法

使用 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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

直接改变状态和forceUpdate()与setState的缺点

javascript

ReactJS