React 事件绑定的实现及区别

更新时间：2024年03月11日 09:34:48 作者：前端小超人rui

事件绑定也是其中一部分内容,通过事件委托和事件合成,React 在内部对事件进行优化和处理,减少了事件处理函数的调用次数,从而提升了性能,本文主要介绍了React事件绑定的实现及区别,感兴趣的可以了解一下

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常用hook的实现示例
本文主要介绍了react常用hook的实现示例,提供状态管理、副作用处理、引用、跨组件共享及性能优化功能,具有一定的参考价值,感兴趣的可以了解一下
2025-08-08
React Fiber源码深入分析
Fiber 可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下
2022-11-11
使用react完成点击返回顶部操作
本文主要介绍了使用react完成点击返回顶部操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
React获取Java后台文件流并下载Excel文件流程解析
这篇文章主要介绍了React获取Java后台文件流下载Excel文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
react实现数据监听方式
这篇文章主要介绍了react实现数据监听方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
详解如何在React中监听鼠标事件
React可以通过使用React事件系统来监听鼠标事件,您可以在React组件中通过使用特定的事件处理函数来注册和处理鼠标事件,本文小编讲给大家详细介绍一下如何在React中监听鼠标事件,需要的朋友可以参考下
2023-09-09
React Native 真机断点调试+跨域资源加载出错问题的解决方法
下面小编就为大家分享一篇React Native 真机断点调试+跨域资源加载出错问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
react动态路由的实现示例
React中动态路由通过ReactRouter库实现,根据应用状态或用户交互动态显示或隐藏组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-11-11
React useMemo与useCallabck有什么区别
useCallback和useMemo是一样的东西，只是入参有所不同，useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；useMemo缓存的是回调函数的return，如果依赖项没有更新，就会使用缓存的return
2022-12-12
基于React.js实现兔兔牌九宫格翻牌抽奖组件
这篇文章主要为大家详细介绍了如何基于React.js实现兔兔牌九宫格翻牌抽奖组件，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2023-01-01