Question

我了解在shouldComponentUpdate中使用nextProps和nextState基于将this.state.someProperty与nextState.someProperty进行比较的结果来确定组件是否应该重新呈现。如果它们不同，则应重新渲染组件。

很清楚。

但是，这似乎不是正在发生的事情。查看此代码。

    class Box extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }

   this.counter = 
     this.counter.bind(this)
  }

  counter() {
    setInterval(()=>{
      this.setState({count: this.state.count+=1})
    }, 10000);
  }

  componentDidMount() {
    this.counter();
  }

  shouldComponentUpdate(nextProps, nextState) { 
    console.log(this.state.count + " " +  nextState.count)
    return true;
  }

  render() {
    return (
      <div> 
        <h1>This App Counts by the Second </h1>
        <h1>{this.state.count}</h1> 
    </div>
    );
  }
};

在shouldComponentUpdate中，我同时记录了state.count和nextState.count值，并且每次都相等。他们应该不一样吗？如果不是，那么使用setState更改状态以确保它们相同时，检查它们是否等效的目的是什么？

Answer 1

nextState和currentState始终相同，因为您在更新原始状态对象时对其进行了突变

  counter() {
    setInterval(()=>{
      this.setState({count: this.state.count+=1})  // mutation done here
    }, 10000);
  }

为了解决此问题，您必须使用类似setState之类的功能

counter() {
    setInterval(()=>{
      this.setState(prevState => ({count: prevState.count + 1}))
    }, 10000);
  }

nextProps和NextState始终相等

1 个答案: