setState意外更新非国家属性

Question

我不知道这是一个已知的问题还是一个预期的特性，但我发现了一个有趣的问题。

constructor() {
  super();
  this.state = { counter: 0 }
  this.incrementButtonListener = (e) => {
    e.preventDefault();
    this.setState(prevState => ({ counter: prevState.counter + 1 }));
  };
}

render() {
  return (
    <div>
      <h1>{this.state.counter}</h1>
      // When clicked, counter increments by 1 and re-renders
      <button onChange={this.incrementButtonListener}>Increment</button> 
    </div>
  )
}

constructor() {
  super();
  this.counter = 0;
  this.incrementButtonListener = (e) => {
    e.preventDefault();
    this.counter++;
  };
}

render() {
  return (
    <div>
      <h1>{this.counter}</h1>
      // When clicked, counter increments by 1 but the difference is NOT rendered
      <button onChange={this.incrementButtonListener}>Increment</button> 
    </div>
  )
}

对吧？基本的东西。

然而，当我试图摆弄这段代码时，发生了一个有趣的情况。我们保持计数器作为一个字段属性和其他一切完整。唯一的区别是，在IncrementButtonListener中，我将在SomeStateProperty上添加一个SetState:

constructor() {
  super();
  this.counter = 0;
  this.incrementButtonListener = (e) => {
    e.preventDefault();
    this.counter++;
    /*-------------------------------ADD THIS*/
    this.setState({});
    // You have to pass an object, even if it's empty. this.setState() won't work.
    /*-----------------------------------------*/
  };
}

render() {
  return (
    <div>
      <h1>{this.counter}</h1>
      // Surprise surprise, now this.counter will update as if it was in the state! 
      <button onChange={this.incrementButtonListener}>Increment</button> 
    </div>
  )
}

这一次，This.counter更新，就好像它处于状态一样！

Answer 1

因为您没有截取状态的更改，所以它会导致重新呈现，而重新呈现又会导致使用您的增量实例属性。这是故意的。对React状态的任何更改都将导致组件重新呈现，除非您正在使用生命周期钩子来控制是否应该发生这种情况。

请参阅https://reactjs.org/docs/react-component.html#shouldcomponentupdate