扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了React中this绑定的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
我们在react项目开发时，通常会遇到this绑定的问题。解决的方法总结下分为下面的三种情况：
import React from 'react'export default class Demo extends React.Component{
constructor(props){ super(props); this.click1.bind(this)//方式1: 在构造函数内绑定
}
click1(){
}
click2=()=>{//方式2: 使用箭头函数
}
click3(){
}
render(){ //方式3: 在render内绑定
return
}
}三种方式都能达到同样的效果，但是性能上还是有很大的差别的。
首先，第三种方式性能是最差的，每次在render的时候都要去绑定this。
对于第二种和第三种，我们这样看其实看不出差别，但是如果我们将代码编译为ES5之后，就能看到其中的区别了：
首先，使用箭头函数的方式，该方式其实是定义在this上的，也就是说，在每一个实例化之后的this都会定义该方法，但是通过方式1，该方式其实是定义在prototype上的，各个实例对象共享该方法。所以，单纯从内存空间的消耗上来看，方式1其实是最好的。
但是定义在原型链上的方法，在实际调用该方法的时候，其查找的过程是这样的：
首先检查this上是否有该方法的定义，如果没有的话，则去prototype上查找是否有该方法，所以在方法调用的过程中，会经历一次跨原型链的查找。该过程是方法1带来的额外的消耗。
但是箭头函数的方式，在实际调用的时候，访问的是外层作用缓存的_this， 所以在作用域查找上有一层消耗。
经过私底下的测试发现，在原型链上的查找比作用域上的查找，性能会好很多。所以综合来看，还是第二种的方式是最优的。
另外，看老外的代码中，发现过一个批量绑定的方式，其实是对方案一的一种优化,可以简单借鉴一下：
感谢你能够认真阅读完这篇文章，希望小编分享的“React中this绑定的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站制作公司行业资讯频道，更多相关知识等着你来学习!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网