React事件处理的机制及原理


Posted in Javascript onDecember 03, 2018

React中的事件处理

在React元素中绑定事件有两点需要注意:

(1)在React中,事件命名采用驼峰命名方式,而不是DOM元素中的小写字母命名方式。例如onclick要写成onClick,onchange要写成onChange等。
(2)处理事件的响应函数要以对象的形式赋值给事件属性,而不是DOM中的字符串形式。例如在DOM中绑定一个点击事件应该写成:

<button onclick="clickButton()">
  Click
</button>

而在React元素中绑定一个点击事件变成这种形式:

<button onClick={clickButton}> // clickButton是一个函数
  Click
</button>

React中的事件是合成事件,并不是原生的DOM事件。

React根据W3C规范定义了一套兼容各个浏览器的事件对象。在DOM中可以通过返回false来阻止事件的默认行为,但在React中,必须显式的调用事件对象的preventDefault方法来阻止事件的默认行为。

在某些场景下如果必须使用DOM提供的原生事件,可以通过React事件对象的nativeEvent属性获取。

其实,在平时的开发中,React组件中处理事件最容易出错的地方是事件处理函数中的this的指向问题,因为ES6 class并不会为方法自动绑定this到当前对象。

下面我们具体来看一下常见的三种处理this的方式:

React事件处理的this处理

使用箭头函数

直接在React元素中采用箭头函数定义事件的处理函数,如:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    }
  }

  render() {
    return (
      <button onClick={(event) => {
          console.log(this.state.number);
        }}>
        Click
      </button>
      )
  }
}

箭头函数中的this指向的是函数定义时的对象,所以可以保证this总是指向当前组件的实例对象。

当事件处理逻辑比较复杂时,如果把所有的逻辑直接写在onClick的大括号中,就会导致render函数变的臃肿,不容易直观地看出组件的UI结构,代码可读性也不好。这样,我们可以把逻辑处理封装成组件的一个方法,然后在箭头函数中调用该方法即可。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    }
  }

  handleClick(event) {
    const number = ++this.state.number;
    this.setState({
      number: number
    });

  }

  render() {
    return (
      <button onClick={(event) => {
          this.handleClick(event);
        }}>
        Click
      </button>
      )
  }
}

直接在render方法中为元素事件定义事件处理函数,最大的问题是,每次render调用时,都会重新创建一个新的事件处理函数,带来额外的性能开销,组件所处层级越低,这种开销就越大。当然,大多数情况下,这种开销是可以接受的。

使用组件方法

直接将组件的方法赋值给元素的事件属性,同时在类的构造函数中,将这个方法的this绑定到当前对象。如:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    const number = ++this.state.number;
    this.setState({
      number: number
    });

  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click
      </button>
      )
  }
}

这种方法的好处是每次render不会重新创建一个回调函数,没有额外的性能损失。但在构造函数中,为事件处理函数绑定this,尤其是存在多个事件处理函数需要绑定时,这种模板式的代码还是会显得繁琐。

有时候我们还会为元素的事件属性赋值时,同时为事件处理函数绑定this,例如:

class MyComponent extends React.Component {
  
  ……

  render() {
    return (
      /* 事件属性赋值和this绑定同时 */
      <button onClick={this.handleClick.bind(this)}>
        Click
      </button>
      )
  }
}

使用bind会创建一个新的函数,因此这种写法依然存在每次render都会创建一个新函数的问题。但是在需要为函数传入额外的参数时,这种写法就比较方便了。

class MyComponent extends React.Component {
  
  ……

  render() {
    const type = 1;
    return (
      /* 事件属性赋值和this绑定同时 */
      <button onClick={this.handleClick.bind(this, type)}>
        Click
      </button>
      )
  }
}

属性初始化语法

使用ES7的property initializers会自动为class中定义的方法绑定this。例如:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }

  handleClick = (event) => {
    const number = ++this.state.number;
    this.setState({
      number: number
    });

  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click
      </button>
      )
  }
}

这种方式既不需要在构造函数中手动绑定this,也不需要担心组件重复渲染导致的函数重复创建的问题。不过由于property initializers 这个特性还处于试验阶段,默认有些浏览器是不支持的,需要使用babel来进行支持。

通过上面我们可以看到,只要处理好了React组件中函数的this绑定问题,React的事件处理就没有太大的问题了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
理解Javascript闭包
Nov 01 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
JointJS流程图的绘制方法
Dec 03 #Javascript
微信小程序之事件交互操作实例分析
Dec 03 #Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 #Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 #Javascript
Vue.js 图标选择组件实践详解
Dec 03 #Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 #Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 #Javascript
You might like
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
javascript简易画板开发
2020/04/12 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
Python异常处理操作实例详解
2018/08/28 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
详解Django中异步任务之django-celery
2020/11/05 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
美国女孩服装购物网站:Justice
2017/03/04 全球购物
PHP实现考试倒计时功能代码
2021/04/16 PHP
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python