<p onClick={this.clickHandler1.bind(this)}>文字</p>

Question

<p onClick={this.clickHandler1.bind(this)}>测试</p>

关于bind(this)为什么不建议直接写在元素上，个人理解如下：

当前所在组件渲染一次，bind(this)就执行一次（并不是点击一次执行一次），bind（this）每次执行都会生成一个新的函数，在react中，元素或者组件是否渲染看的是props和state数据是否有更新，所以新的函数会造成子元素或者子组件的不必要的渲染。

请问老师，这样理解有问题吗？

Answer 1

慕函数3762822 2021-09-18 20:34:11

正解，并不是点击一次执行一次

Answer 2

双越 2020-03-27 16:51:21

在react中，元素或者组件是否渲染看的是props和state数据是否有更新，所以新的函数会造成子元素或者子组件的不必要的渲染 —— 这句话我没太理解你表达的意思。

其他的没问题。

• 提问者 西贝99 #1

  class TestComponent extends React.Component {
      render() {
          return (<div>
              <button onClick={this.props.onClick}>
                  点击
              </button>
          </div>);
      }
  }
  
  
  class LoggingButton extends React.Component {
    handleClick() {
      console.log('this is:', this);
    }
  
    render() {
      return (
        <TestComponent onClick={this.handleClick.bind(this)}/>
       );
    }
  }
  
  每次渲染 LoggingButton 时都会创建不同的回调函数,
  如果回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染

• 双越 回复 提问者 西贝99 #2

  嗯呢，你描述的没错，会有这个问题。