javascript - 为什么在 props 没有改变的情况下调用子组件的渲染？

Question

 // Child component
 class Button extends React.Component {
    render() {
      console.log("Render of Button called");
      return (
        <button onClick={this.props.handleClick}>
          {this.props.children}
        </button>
      );
    }
  }

 // Parent component
  class ButtonRenderer extends React.Component {
    state = {
      count: 0
    };
    increment() {
      this.setState({
        count: this.state.count + 1
      });
    }
    render() {
      console.log("Render of ButtonRenderer called.");
      return (
        <div>
          <Button handleClick={this.increment.bind(this)}>Click me</Button>
          <div>Count: {this.state.count}</div>
        </div>
      );
    }
  }

  function init() {
    var rootElement = document.getElementById("root");
    const childElement = <ButtonRenderer />;
    ReactDOM.render(childElement, rootElement);
  }

For every click of the button, state changes in parent component and hence ButtonRenderer.render will be called along with the child component, Button.render. Why?

I tried all 3 approaches for calling event handlers:

1. Using inline bind(). As in the above code.

2. Class property:

... 
increment = () => {
  this.setState({
    count: ++this.state.count
  });
}
...
 <Button handleClick={this.increment}>Click me</Button>
...

3. Inline arrow function.

... 
increment(){
  this.setState({
    count: ++this.state.count
  });
}
...
<Button handleClick={() => {this.increment();}}>Click me</Button>
...

For every click all 3 approaches exected both the render methods.

我希望 approach1 和 approach2 不会在每次点击时调用 Button 的渲染方法，因为没有任何变化。我希望 approach3 为每次单击调用 Button 的渲染方法，因为我使用的是内联箭头函数，它将为 ButtonRendered 类的每个渲染创建一个新函数。

每次点击按钮的浏览器控制台输出:

Render of ButtonRenderer called.
Render of Button called

我的问题:当没有专业人士更改为 Button comp 时，为什么连 approach1(使用绑定(bind))和 approach2(使用类属性)都在调用子组件 Button 的 render() 方法？

Answer 1

使用PureComponent如果你想避免不必要的渲染:

// Child component
 class Button extends React.PureComponent {
    render() {
      console.log("Render of Button called");
      return (
        <button onClick={this.props.handleClick}>
          {this.props.children}
        </button>
      );
    }
  }

 // Parent component
  class ButtonRenderer extends React.Component {
    state = {
      count: 0
    };
    increment = () => {
      this.setState({
        count: this.state.count + 1
      });
    }
    render() {
      console.log("Render of ButtonRenderer called.");
      return (
        <div>
          <Button handleClick={this.increment}>Click me</Button>
          <div>Count: {this.state.count}</div>
        </div>
      );
    }
  }

  function init() {
    var rootElement = document.getElementById("root");
    const childElement = <ButtonRenderer />;
    ReactDOM.render(childElement, rootElement);
  }
  init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>