React中的事件处理为什么要bind this?
个人总结:
问: 请给我讲一下React中的事件处理为什么要bind this?
答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind肯定是不行的,下面讲一下为什么要bind this:
首先我们知道React是通过创建虚拟DOM 然后将虚拟DOM生成真实的DOM 最后插入到页面中,
而React生命周期中render方法的作用就是将虚拟DOM渲染成真实DOM
看一下这篇文章 https://github.com/hujiulong/blog/issues/4
这里提到了render的实现 render将"on+大写字母"开头的事件属性 转化为"on+小写字母"开头的属性 ,并生成真实DOM,生成真实DOM的同时
把这个函数赋值过去。
( 这篇文章只是一个简要的示例,实际情况更为复杂)
在JSX语法中: onClick={ function } onClick这个属性本身只是一个"中间变量"。将函数赋值给onClick这个中间变量,后面要进行JSX语法转化,将JSX组件转换成Javascript对象,进而转换成真实DOM。
把onClick作为中间变量,指向一个函数的时候,后面的一系列处理中,使用onClick这个中间变量所指向的函数,里面的this会自然丢失掉了,不是再指向react组件实例了。
预备知识点:JS中的this是由函数调用者调用的时候决定的。
obj:{
fun:function(){ console.log(this) }
}
obj.fun() //obj
let var = obj.fun()
var() // window||undefined
在类组件的render函数中 将函数fun赋给真实的属性的时候 有点类似于做了这样的操作:
class Cat {
sayThis () {
console.log(this); // 这里的 `this` 指向谁?
}
exec (cb) {
cb();
}
render () {
this.exec(this.sayThis);
}
}
const cat = new Cat();
cat.render(); // 输出结果是什么?
当把一个函数作为callback传递给另一个函数的时候,这个函数的this一定是会丢失的,
相当于是 let var = function () { ..} ; var();
所以会出现这种问题。
延伸一下,为什么React没有自动的把bind集成到render方法中呢?
答:因为render函数会被多次调用,每次都要bind会影响性能,所以官方建议你自己在constructor中手动bind达到性能优化。
最新文章
- Ubuntu Server(Ubuntu 14.04 LTS 64位)安装libgdiplus2.10.9出错问题记录
- php每天一题:strlen()与mb_strlen()的作用分别是什么
- netezza 数据库 取 季初 季末 时间
- Unity关于获取游戏对象
- web
- xamarin.ios 实现圆形进度条
- asp.net正则表达式提取网页网址、标题、图片实例以及过滤所有HTML标签实例
- Windows Server 2012 R2 设置
- 从github上面拷贝源码
- 对象的引用和clone
- Delphi 调用netsh命令修改IP地址
- MySQL高可用解决方案(MySQL HA Solution)
- UILabel 的使用,属性详解
- org.xml.sax.SAXParseException; lineNumber: 2; columnNumber: 6; 不允许有匹配 ";[xX][mM][lL]"; 的处理指令目标。
- HashMap与ConcurrentHashMap的测试报告
- Hibernate验证器
- jenkins配置演示
- chrome总是提示“请停用开发者模式运行的扩展程序”
- vue 关于vue.set的学习笔记
- poj1064 Cable master(二分查找,精度)