React事件绑定的几种方式

Souleigh ✨
• 阅读 1663

React事件绑定的几种方式

一、React事件是什么

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

最简单的事件绑定如下:

class ShowAlert extends React.Component {  
  showAlert() {  
    console.log("Hello World");  
  }  

  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的时候都会生成新的方法实例,性能问题欠缺。若该函数作为属性值传给子组件的时候,都会导致额外的渲染。而方式三方式四只会生成一个方法实例

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

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。 1、使用解构获取json数据let jsonData   id: 1, status: "OK", data: ['a', 'b'] ; let  id, status, data: number   jsonData; console.log(id, status, number )
刚刚好 刚刚好
2个月前
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
晴空闲云 晴空闲云
2个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。 盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
> MemFire Cloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
React组件中的函数绑定this的几种方式
在React中使用class定义组件时如果不注意this的指向问题,会带来一些麻烦。 绑定this主要有下面两种方法: 1\. bind() 在class中定义函数,然后在**构造方法**中使用bind()绑定当前的组件对象。 class MyComponent extends React.Component { constr
可莉 可莉
1年前
06. react 初次见面
    React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同: * React事件绑定属性的命名采用驼峰式写法,而不是小写。 * 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)     例如,传统的 HTML: <button onclick="activateLas
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
#### 背景描述 # Time: 2019-01-24T00:08:14.705724+08:00 # User@Host: **[**] @ [**] Id: ** # Schema: sentrymeta Last_errno: 0 Killed: 0 # Query_time: 0.315758 Lock_
helloworld_34035044 helloworld_34035044
4个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为
helloworld_28799839 helloworld_28799839
1个月前
常用知识整理
# Javascript ## 判断对象是否为空 ```js Object.keys(myObject).length === 0 ``` ## 经常使用的三元运算 > 我们经常遇到处理表格列状态字段如 `status` 的时候可以用到 ``` vue