React 绑定事件的几种方式

一、render方法中使用箭头函数

在回调函数中使用箭头函数，直接在 render() 里写行内的箭头函数(不推荐)，这种写法存在的问题就是，当每次执行render() 的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Box extends Component {
  handleClick(e,val){
  	console.log(e,val);
  }
  render() {
    return (
      <button onClick={(e)=>this.handleClick(e,'aa')}>添加</button>
    );
  }
}

ReactDOM.render(
  <Box />,
  document.getElementById('root')
);

二、render方法中使用bind

在 render() 方法中，使用 bind 绑定 this(不推荐)。直接在组件内定义一个非箭头函数的方法，然后在render里直接使用onClick={this.handleClick.bind(this)}，这种方式的缺点是，每次都使用 bind 绑定 this，代码会冗余：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Box extends Component {
	handleClick(val,e) {	//事件对象e要放在最后
		console.log(val,e);
	}
	render() {
		return (
			<button onClick={this.handleClick.bind(this, 'aa')}>添加</button>
		);
	}
}

ReactDOM.render(
  <Box />,
  document.getElementById('root')
);

三、定义阶段使用箭头函数绑定

使用属性初始化器来正确的绑定回调函数(推荐)，在组件内使用箭头函数定义一个方法，这种方式的缺点是不能自定义传参：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Box extends Component {
	handleClick =(e)=>{
		console.log(e);
	}
	render() {
		return (
			<button onClick={this.handleClick}>添加</button>
		);
	}
}

ReactDOM.render(
  <Box />,
  document.getElementById('root')
);

四、constructor中bind

直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)，这种方式的优点是性能比较好，不管render()执行多少次，最终都指向同一个引用。这种方式的缺点是不能自定义传参。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Box extends Component {
	constructor(){
		super();
		this.myhandleClick = this.handleClick.bind(this);
	}
	handleClick(e){
		console.log(e);
	}
	render() {
		return (
			<button onClick={this.myhandleClick}>添加</button>
		);
	}
}

ReactDOM.render(
  <Box />,
  document.getElementById('root')
);

原文链接：blog.csdn.net/Charissa201…