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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
求解开jscript.encode代码的asp函数
Feb 28 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
微信小程序实现城市列表选择
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
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
使用webpack构建应用的方法步骤
2019/03/04 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
详解Python发送邮件实例
2016/01/10 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
体育部部长竞选稿
2015/11/21 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android
JavaScript实现优先级队列
2021/12/06 Javascript
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL