Javascript 为什么是子组件'；当道具未更改时调用渲染？

我的问题：为什么在没有专业人士更改为Button comp的情况下，甚至连Approach 1（使用绑定）和Approach 2（使用类属性）都在调用子组件Button的render（）方法

如果父组件已更新，React是否始终更新该组件中的所有直接子组件

否。只有在shouldComponentUpdate（）时，React才会重新呈现组件 返回true。默认情况下，该方法总是返回true以避免任何错误 新来者的微妙缺陷（正如William B所指出的，DOM不会 实际更新，除非发生更改，以降低影响）。

实际上，默认情况下，子组件将始终重新渲染，除非您明确告诉then不要这样做<代码>shouldComponentUpdate应该在这里实现，以防止不必要的渲染，除非道具值发生更改。或者使用

PureComponent

如果要避免不必要的渲染，请使用：

//子组件
类按钮扩展了React.PureComponent{
render（）{
log（“调用按钮的渲染”）；
返回(
{this.props.children}
);
}
}
//父组件
类ButtonRenderer扩展React.Component{
状态={
计数：0
};
增量=（）=>{
这是我的国家({
计数：this.state.count+1
});
}
render（）{
log（“按钮渲染器调用”）；
返回(
点击我
计数：{this.state.Count}
);
}
}
函数init（）{
var rootElement=document.getElementById（“根”）；
常量childElement=；
render（childElement，rootElement）；
}
init（）

解决方案#1

当您扩展到
React.PureComponent
而不是
React.Component
某些生命周期方法时。在这种情况下，这是有效的

如果你帮助我的答案，请考虑投票表决
 // 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);
  }

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

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

Render of ButtonRenderer called.
Render of Button called

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

        // Child component
    class Button extends React.PureComponent {
      constructor (props) {
        super(props)
      }
      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
        });
      }
      render() {
        console.log("Render of ButtonRenderer called.");
        return (
          <div>
            <Button handleClick={this.increment}>Click me</Button>
            <div>Count: {this.state.count}</div>
          </div>
        );
      }
    }