React.js绑定this的5种方法(小结)


Posted in Javascript onJune 05, 2018

this在javascript中已经相当灵活,把它放到React中给我们的选择就更加困惑了。下面一起来看看React this的5种绑定方法。

1.使用React.createClass

如果你使用的是React 15及以下的版本,你可能使用过React.createClass函数来创建一个组件。你在里面创建的所有函数的this将会自动绑定到组件上。

const App = React.createClass({
 handleClick() {
  console.log('this > ', this); // this 指向App组件本身
 },
 render() {
  return (
   <div onClick={this.handleClick}>test</div>
  );
 }
});

但是需要注意随着React 16版本的发布官方已经将改方法从React中移除

2.render方法中使用bind

如果你使用React.Component创建一个组件,在其中给某个组件/元素一个onClick属性,它现在并会自定绑定其this到当前组件,解决这个问题的方法是在事件函数后使用.bing(this)将this绑定到当前组件中。

class App extends React.Component {
 handleClick() {
  console.log('this > ', this);
 }
 render() {
  return (
   <div onClick={this.handleClick.bind(this)}>test</div>
  )
 }
}

这种方法很简单,可能是大多数初学开发者在遇到问题后采用的一种方式。然后由于组件每次执行render将会重新分配函数这将会影响性能。特别是在你做了一些性能优化之后,它会破坏PureComponent性能。不推荐使用

3.render方法中使用箭头函数

这种方法使用了ES6的上下文绑定来让this指向当前组件,但是它同第2种存在着相同的性能问题,不推荐使用

class App extends React.Component {
 handleClick() {
  console.log('this > ', this);
 }
 render() {
  return (
   <div onClick={e => this.handleClick(e)}>test</div>
  )
 }
}

下面的方法可以避免这些麻烦,同时也没有太多额外的麻烦。

4.构造函数中bind

为了避免在render中绑定this引发可能的性能问题,我们可以在constructor中预先进行绑定。

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>
  )
 }
}

然后这种方法很明显在可读性和维护性上没有第2种和第3种有优势,但是第2种和第3种由于存在潜在的性能问题不推荐使用,那么现在推荐 ECMA stage-2 所提供的箭头函数绑定。

5.在定义阶段使用箭头函数绑定

要使用这个功能,需要在.babelrc种开启stage-2功能,绑定方法如下:

class App extends React.Component {
 constructor(props) {
  super(props);
 }
 handleClick = () => {
  console.log('this > ', this);
 }
 render() {
  return (
   <div onClick={this.handleClick}>test</div>
  )
 }
}

这种方法有很多优化:

  1. 箭头函数会自动绑定到当前组件的作用域种,不会被call改变
  2. 它避免了第2种和第3种的可能潜在的性能问题
  3. 它避免了第4种绑定时大量重复的代码

总结:

如果你使用ES6和React 16以上的版本,最佳实践是使用第5种方法来绑定this

参考资料:

React.js pure render性能渲染反模式

this绑定装饰器

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

Javascript 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
react路由配置方式详解
Aug 07 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
微信小程序实现城市列表选择
Jun 05 #Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 #Javascript
如何使node也支持从url加载一个module详解
Jun 05 #Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 #Javascript
JS非行间样式获取函数的实例代码
Jun 05 #Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 #Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 #Javascript
You might like
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python实现定时任务
2017/02/08 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
python 以16进制打印输出的方法
2018/07/09 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
Python post请求实现代码实例
2020/02/28 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
介绍一下#error预处理
2015/09/25 面试题
新闻记者实习自我鉴定
2013/09/19 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
酒店员工培训方案
2014/06/02 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
python和anaconda的区别
2022/05/06 Python