React 事件绑定的实现及区别
更新时间：2024年03月11日 09:34:48 作者：前端小超人rui
事件绑定也是其中一部分内容,通过事件委托和事件合成,React 在内部对事件进行优化和处理,减少了事件处理函数的调用次数,从而提升了性能,本文主要介绍了React事件绑定的实现及区别,感兴趣的可以了解一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
1. 是什么
在react应用中，事件名都是小驼峰格式进行书写，例如onclick要改写成onClick最简单的绑定事件如下：
class ShowAlert extends React.Component{
ShowAlert(){
console.log('hello')
}
render(){
return <button onClick={this.ShowAlert}>show</button>
}
}
从上面可以看到，事件绑定的方法需要使用{}包住上述代码看似没有问题，但是当前处理函数代码或换成console.log(this)的时候，点击按钮，则会发现输出undefined****
2. 如何绑定
为了解决上面正确输出this问题，常见的绑定方式有：
- render方法中使用bind
- render方法中使用尖头函数
- constructor中bind
- 定义阶段使用箭头函数绑定
2.1 render方法中使用bind
如果使用一个类组件，在其中给某个元素/组件 一个onClick属性，他现在并会自定绑定其this到当前组件，解决这个问题的方法是在函数后使用.bind（this）将this绑定到当前组件中
class App extends React.Component{
handleClick(){
console.log(this)
}
render(){
return <div onClick={this.handleClick.bind(this)}>test</div>
}
}
这种渲染方式每次render渲染的时候，都会重新进行bind操作，影响性能
2.2 render方法中使用箭头函数
通过ES6的上下文来将this的指向绑定给当前组件，同样再每一次render的时候都会生成新的方法，影响性能
class App extends React.Component{
handleClick(){
console.log(this)
}
render(){
return <div onClick={e=>this.handleClick.bind(e)}>test</div>
}
}
2.3 constructor中bind
在constructor中预先绑定bind当前组件，可以避免render操作中重复绑定
class App extends React.Component{
constructor(props){
super(props);
this.handleClick=this.handClick.bind(this);
}
handleClick(){
console.log(this)
}
render(){
return <div onClick={this.handleClick.bind(this)}>test</div>
}
}
2.4 定义阶段使用箭头函数绑定(最优)
跟上述方式三一样，能够避免在render操作中重复绑定，实现也非常简单，如下：
class App extends React.Component{
constructor(props){
super(props)
}
handleClick=()=>{
console.log(this)
}
render(){
return <div onClick={this.handleClick}>test</div>
}
}
3. 区别
上述四种方法的方式，区别如下：
编写方式：方式一方式二写法简单，方式三的编写过于冗杂
性能方面：方式一和方式二在每次组件render的时候都会生成新的方法实例，性能问题欠缺。若该函数作为属性值传给子组件的时候，都会导致额外的渲染，而方式三方式四只会生成一个方法实例
综上所述，方式四是最优的事件绑定方式
到此这篇关于React 事件绑定的实现及区别的文章就介绍到这了,更多相关React 事件绑定内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
这篇文章主要为大家详细介绍了react native之ScrollView下拉刷新效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Hooks?发布之后，函数组件能拥有自己的?state，React提供了很多内置的Hooks，这篇文章就来和大家介绍一下useState?和?useEffect的使用，需要的可以参考一下2023-06-06
最近两个项目都用到了React Navigation，所以就研究一下如何使用，本文主要介绍了react-navigation6.x路由库的基本使用，感兴趣的可以了解一下2021-11-11
这篇文章主要介绍了React中使用外部样式的3种方式(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了react 不用插件实现数字滚动的效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了React State状态与生命周期的实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-03-03
这篇文章主要为大家介绍了React的生命周期函数初始挂载更新移除详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
在大型Web应用中，一个常见的设计需求是让某些组件具有吸顶效果，这意味着当页面向下滚动时，该组件会保持在屏幕顶部，在本文中，我们将介绍如何在React项目中实现吸顶效果。我们将首先讨论使用原生JavaScript领域的方法来实现，然后将这些方法与React结合起来2023-06-06
这篇文章主要介绍了详解基于React.js和Node.js的SSR实现方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了使用reactjs优化了进度条后页面性能提高了70%的操作技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
最新评论