在React中如何优雅的处理事件响应详解


Posted in Javascript onJuly 24, 2017

前言

本文主要给大家介绍的是关于React处理事件响应的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧。

React中定义一个组件,可以通过React.createClass或者ES6的class。本文讨论的React组件是基于class定义的组件。采用class的方式,代码结构更加清晰,可读性强,而且React官方也推荐使用这种方式定义组件。

处理事件响应是Web应用中非常重要的一部分。React中,处理事件响应的方式有多种。

一、使用箭头函数

先上代码:

//代码1
class MyComponent extends React.Component {

 render() {
 return (
  <button onClick={()=>{console.log('button clicked');}}>
  Click
  </button>
 );
 }
}

当事件响应逻辑比较复杂时,再把所有的逻辑直接写在onClick的大括号内,就会导致render函数变得臃肿,不容易直观地看出组件render出的元素结构。这时,可以把逻辑封装成组件的一个方法,然后在箭头函数中调用这个方法。

如下所示:

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

 handleClick() {
 this.setState({
  number: ++this.state.number
 });
 }
 
 render() {
 return (
  <div>
  <div>{this.state.number}</div>
  <button onClick={()=>{this.handleClick();}}>
   Click
  </button>
  </div>
 );
 }
}

这种方式最大的问题是,每次render调用时,都会重新创建一个事件的回调函数,带来额外的性能开销,当组件的层级越低时,这种开销就越大,因为任何一个上层组件的变化都可能会触发这个组件的render方法。当然,在大多数情况下,这点性能损失是可以不必在意的。这种方式也有一个好处,就是不需要考虑this的指向问题,因为这种写法保证箭头函数中的this指向的总是当前组件。

二、使用组件方法

代码先:

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

 handleClick() {
 this.setState({
  number: ++this.state.number
 });
 }
 
 render() {
 return (
  <div>
  <div>{this.state.number}</div>
  <button onClick={this.handleClick}>
   Click
  </button>
  </div>
 );
 }
}

这种方式的好处是每次render,不会重新创建一个回调函数,没有额外的性能损失。需要注意的是,使用这种方式要在构造函数中为事件回调函数绑定this: this.handleClick = this.handleClick.bind(this) ,否则handleClick中的this是undefined。这是因为ES6 语法的缘故,ES6 的 Class 构造出来的对象上的方法默认不绑定到 this 上,需要我们手动绑定。每次都手动绑定this是不是有点蛋疼?好吧,让我们来看下一种方式。

三、属性初始化语法(property initializer syntax)

使用ES7的 property initializers,代码可以这样写:

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

 handleClick = () => {
 this.setState({
  number: ++this.state.number
 });
 }
 
 render() {
 return (
  <div>
  <div>{this.state.number}</div>
  <button onClick={this.handleClick}>
   Click
  </button>
  </div>
 );
 }
}

哈哈,再也不用手动绑定this了。但是你需要知道,这个特性还处于试验阶段,默认是不支持的。如果你是使用官方脚手架Create React App 创建的应用,那么这个特性是默认支持的。你也可以自行在项目中引入babel的transform-class-properties插件获取这个特性支持。

四、回调函数传参问题

事件的回调函数默认是会被传入一个事件对象Event作为参数的。如果我想传入其他参数给回调函数应该怎么办呢?

使用第一种方式的话很简单,直接传就可以了:

//代码5
class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  list: [1,2,3,4],
  current: 1
 };
 }
 
 handleClick(item,event) {
 this.setState({
  current: item
 });
 }

 render() {
 return (
  <ul>
  {this.state.list.map(
   (item)=>(
   <li className={this.state.current === item ? 'current':''} 
   onClick={(event) => this.handleClick(item, event)}>{item}
   </li>
   )
  )}
  </ul>
 );
 }
}

使用第二种方式的话,可以把绑定this的操作延迟到render中,在绑定this的同时,绑定额外的参数:

//代码6
class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  list: [1,2,3,4],
  current: 1
 };
 }
 
 handleClick(item) {
 this.setState({
  current: item
 });
 }

 render() {
 return (
  <ul>
  {this.state.list.map(
   (item)=>(
   <li className={this.state.current === item ? 'current':''} 
   onClick={this.handleClick.bind(this, item)}>{item}
   </li>
   )
  )}
  </ul>
 );
 }
}

使用第三种方式,解决方案和第二种基本一致:

//代码7
class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  list: [1,2,3,4],
  current: 1
 };
 }
 
 handleClick = (item) => {
 this.setState({
  current: item
 });
 }

 render() {
 return (
  <ul>
  {this.state.list.map(
   (item)=>(
   <li className={this.state.current === item ? 'current':''} 
   onClick={this.handleClick.bind(undefined, item)}>{item}
   </li>
   )
  )}
  </ul>
 );
 }
}

不过这种方式就有点鸡肋了,因为虽然你不需要通过bind函数绑定this,但仍然要使用bind函数来绑定其他参数。

关于事件响应的回调函数,还有一个地方需要注意。不管你在回调函数中有没有显式的声明事件参数Event,React都会把事件Event作为参数传递给回调函数,且参数Event的位置总是在其他自定义参数的后面。例如,在代码6和代码7中,handleClick的参数中虽然没有声明Event参数,但你依然可以通过arguments[1]获取到事件Event对象。

总结

三种绑定事件回调的方式,第一种有额外的性能损失;第二种需要手动绑定this,代码量增多;第三种用到了ES7的特性,目前并非默认支持,需要Babel插件的支持,但是写法最为简洁,也不需要手动绑定this。推荐使用第二种和第三种方式。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 #Javascript
想用好React的你必须要知道的一些事情
Jul 24 #Javascript
利用node.js实现反向代理的方法详解
Jul 24 #Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 #Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 #Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 #Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 #Javascript
You might like
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
vue实现购物车案例
2020/05/30 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
Django url 路由匹配过程详解
2021/01/22 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
主持人演讲稿
2014/05/13 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
消防宣传语大全
2015/07/13 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
小学班级口号大全
2015/12/25 职场文书