React事件绑定的方式详解
更新时间：2021年07月24日 08:21:51 作者：喆星高照
react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向，今天通过本文给大家介绍React事件绑定的方式，感兴趣的朋友
一、是什么
在react应用中，事件名都是用小驼峰格式进行书写，例如onclick要改写成onClick
最简单的事件绑定如下：
class ShowAlert extends React.Component {
showAlert() {
console.log("Hi");
}
render() {
return <button onClick={this.showAlert}>show</button>;
}
}
从上面可以看到，事件绑定的方法需要使用{}包住
上述的代码看似没有问题，但是当将处理函数输出代码换成console.log(this)的时候，点击按钮，则会发现控制台输出undefined
二、如何绑定
为了解决上面正确输出this的问题，常见的绑定方式有如下：
- render方法中使用bind
- render方法中使用箭头函数
- constructor中bind
- 定义阶段使用箭头函数绑定
render方法中使用bind
如果使用一个类组件，在其中给某个组件/元素一个onClick属性，它现在并会自定绑定其this到当前组件，解决这个问题的方法是在事件函数后使用.bind(this)将this绑定到当前组件中
class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick.bind(this)}>test</div>
)
}
}
这种方式在组件每次render渲染的时候，都会重新进行bind的操作，影响性能
render方法中使用箭头函数
通过ES6的上下文来将this的指向绑定给当前组件，同样在每一次render的时候都会生成新的方法，影响性能
class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={e => this.handleClick(e)}>test</div>
)
}
}
constructor中bind
在constructor中预先bind当前组件，可以避免在render操作中重复绑定
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick}>test</div>
)
}
}
定义阶段使用箭头函数绑定
跟上述方式三一样，能够避免在render操作中重复绑定，实现也非常的简单，如下：
class App extends React.Component {
constructor(props) {
super(props);
}
handleClick = () => {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick}>test</div>
)
}
}
三、区别
上述四种方法的方式，区别主要如下：
- 编写方面：方式一、方式二写法简单，方式三的编写过于冗杂
- 性能方面：方式一和方式二在每次组件render的时候都会生成新的方法实例，性能问题欠缺。若该函数作为属性值传给子组件的时候，都会导致额外的渲染。而方式三、方式四只会生成一个方法实例
综合上述，方式四是最优的事件绑定方式
到此这篇关于React事件绑定的方式的文章就介绍到这了,更多相关React事件绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了react.js 翻页插件实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-01-01
这篇文章主要介绍了React中的Hooks进阶理解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了React获取DOM和获取组件实例的方式,如何创建refs来获取对应的DOM呢?目前有三种方式，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
React Native中WebView与html双向通信遇到的坑
这篇文章主要介绍了React Native中WebView与html双向通信的一些问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-01-01
jsx就是javsscript与xml结合的一种格式，是js语法的一种扩展，只要把html代码写在js中就是jsx。react中定义组件有3种写法：函数的方式、es5的写法、es6（类）的写法2022-08-08
这篇文章主要为大家详细介绍了React拖拽调整大小的组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家介绍了React Hooks实现的中文输入组件示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家介绍了React useCallback钩子的作用方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
下面小编就为大家带来一篇浅谈react.js中实现tab吸顶效果的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
浅谈react 16.8版本新特性以及对react开发的影响
本文主要介绍了react 16.8版本新特性以及对react开发的影响，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论