标签：函数 tor 创建 写法 end 代码 方法 state 一个
一、class方式定义组件事件绑定的几种方法
（一）在构造函数中使用bind绑定this
1 class Button extends React.Component { 2 constructor(props) { 3 super(props); 4 this.handleClick = this.handleClick.bind(this); 5 } 6 handleClick(){ 7 console.log(‘this is:‘, this); 8 } 9 render() { 10 return ( 11 <button onClick={this.handleClick}> 12 Click me 13 </button> 14 ); 15 } 16 }
（二）在调用的时候使用bind去绑定this
1 class Button extends React.Component { 2 handleClick(){ 3 console.log(‘this is:‘, this); 4 } 5 render() { 6 return ( 7 <button onClick={this.handleClick.bind(this)}> 8 Click me 9 </button> 10 ); 11 } 12 }
（三）调用的时候使用箭头函数绑定this
1 class Button extends React.Component { 2 handleClick(){ 3 console.log(‘this is:‘, this); 4 } 5 render() { 6 return ( 7 <button onClick={()=>this.handleClick()}> 8 Click me 9 </button> 10 ); 11 } 12 }
（四）使用属性初始化语法直接绑定
1 class Button extends React.Component { 2 handleClick=()=>{ 3 console.log(‘this is:‘, this); 4 } 5 render() { 6 return ( 7 <button onClick={this.handleClick}> 8 Click me 9 </button> 10 ); 11 } 12 }
二、比较上述几个方式的优劣
三、事件绑定方法总结
方式一是官方推荐的绑定方式，也是性能最好的方式。方式二和凡是三会有性能影响并且当方法作为属性传递给子组件的时候会引起重渲问题。方式四是性能比较好的，现在 babel 已经很成熟了，推荐大家使用
标签：函数 tor 创建 写法 end 代码 方法 state 一个
原文地址：https://www.cnblogs.com/liufuyuan/p/10837402.html
