前言
本文主要给大家介绍了关于React事件绑定的几种方法对比的相关呢荣，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
React事件绑定
由于类的方法默认不会绑定this，因此在调用的时候如果忘记绑定，this的值将会是undefined。
通常如果不是直接调用，应该为方法绑定this。绑定方式有以下几种：
1. 在构造函数中使用bind绑定this
Click me
);
}
}
2. 在调用的时候使用bind绑定this
Click me
);
}
}
3. 在调用的时候使用箭头函数绑定this
this.handleClick()}>
Click me
);
}
}
4. 使用属性初始化器语法绑定this(实验性)
{
console.log('this is:',this);
}
render() {
return (
);
}
}
比较
方式2和方式3都是在调用的时候再绑定this。
- 优点：写法比较简单，当组件中没有state的时候就不需要添加类构造函数来绑定this
- 缺点：每一次调用的时候都会生成一个新的方法实例，因此对性能有影响，并且当这个函数作为属性值传入低阶组件的时候，这些组件可能会进行额外的重新渲染，因为每一次都是新的方法实例作为的新的属性传递。
方式4：利用属性初始化语法，将方法初始化为箭头函数，因此在创建函数的时候就绑定了this。
总结
方式1是官方推荐的绑定方式，也是性能最好的方式。方式2和方式3会有性能影响并且当方法作为属性传递给子组件的时候会引起重渲问题。方式4目前属于实验性语法，但是是最好的绑定方式，需要结合bable转译
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
