在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 相关文章推荐
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
table行随鼠标移动变色示例
May 07 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
pandas去除重复列的实现方法
2019/01/29 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
常务副总经理任命书
2014/06/05 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
优秀党员个人总结
2015/02/14 职场文书
会计求职自荐信
2015/03/26 职场文书
现场施工员岗位职责
2015/04/11 职场文书
刑事撤诉申请书
2015/05/18 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
分享python函数常见关键字
2022/04/26 Python