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 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
JavaScript函数基础详解
Feb 03 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
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
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
PHP加密解密函数详解
2015/10/28 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
js实现微博发布小功能
2017/01/12 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
python简单区块链模拟详解
2019/07/03 Python
python 贪心算法的实现
2020/09/18 Python
类的返射机制中的包及核心类
2016/09/12 面试题
实习自我鉴定模板
2013/09/28 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
家长学校工作方案
2014/05/07 职场文书
企业文明单位申报材料
2014/05/16 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python