【 React 】React 事件绑定的方式有哪些?有什么区别?

1. 是什么

在react应用中,事件名都是小驼峰格式进行书写,例如onclick要改写成onClick

最简单的绑定事件如下:

javascript 复制代码
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绑定到当前组件中

javascript 复制代码
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的时候都会生成新的方法,影响性能

javascript 复制代码
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操作中重复绑定

javascript 复制代码
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操作中重复绑定,实现也非常简单,如下:

javascript 复制代码
class App extends React.Component{
    constructor(props){
      super(props)
    }
    handleClick=()=>{
        console.log(this)
    }
    render(){
        return <div onClick={this.handleClick}>test</div>
    }
}

3. 区别

上述四种方法的方式,区别如下:

编写方式:方式一方式二写法简单,方式三的编写过于冗杂

性能方面:方式一和方式二在每次组件render的时候都会生成新的方法实例,性能问题欠缺。若该函数作为属性值传给子组件的时候,都会导致额外的渲染,而方式三方式四只会生成一个方法实例

综上所述,方式四是最优的事件绑定方式

相关推荐
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端