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达到性能优化。
React中的事件处理为什么要bind this?的更多相关文章
- react中键盘enter事件处理
对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...
- react中回车enter事件处理
对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...
- React中如何优雅的捕捉事件错误
React中如何优雅的捕捉事件错误 前话 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...
- React中的三大属性
一.前言: 属性1:state 属性2:props 属性3:ref 与事件处理 二.主要内容: 属性1:state 1,认识: 1) state 是组件对象中最重要的属性,值是一个对象(可以包含多个数 ...
- 如何优雅地在React中处理事件响应&&React绑定onClick为什么要用箭头函数?
React绑定onClick为什么要用箭头函数? https://segmentfault.com/q/1010000010918131 如何优雅地在React中处理事件响应 https://segm ...
- React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...
- 七天接手react项目 —— state&事件处理&ref
state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...
- 前端必读2.0:如何在React 中使用SpreadJS导入和导出 Excel 文件
最近我们公司接到一个客户的需求,要求为正在开发的项目加个功能.项目的前端使用的是React,客户想添加具备Excel 导入/导出功能的电子表格模块. 经过几个小时的原型构建后,技术团队确认所有客户需求 ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
随机推荐
- 手游服务器端接入facebook的SDK
手游如果支持facebook登录,就要接入facebook的登录SDK.刚好工作中自己做了这一块的接入功能现在记录分享下来提供一个参考. 当前只是接入了登录这个功能,先简单的说说接入facebook登 ...
- C# 正则表达式大全(转载)
文章导读 正则表达式的本质是使用一系列特殊字符模式,来表示某一类字符串.正则表达式无疑是处理文本最有力的工具,而.NET提供的Regex类实现了验证正则表达式的方法.Regex 类表示不可变(只读)的 ...
- day05-3 初步了解数据类型
目录 数据类型介绍 数字类型 整形(int) 浮点型(float) 字符串 列表 字典 布尔值 数据类型介绍 不同的数据会有不同的数据类型 为了定义不同的数据,我们Python中提供了下述几个数据类型 ...
- 转载:常用 Git 命令清单
转载:常用 Git 命令清单 原文地址:http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 作者: 阮一峰 我每天使用 Git , ...
- Pyhton学习——Day9(阶段性练习)
# 1.文件内容如下,标题为:姓名,性别,年纪,薪资## egon male 18 3000# alex male 38 30000# wupeiqi female 28 20000# yuanhao ...
- HTML中使用 js 添加 data-toggle
情况:<li class="active"><a href="#server1" data-toggle="tab"> ...
- VS2015 C# 编写USB通信上位机时,改变net框架导致DLL调用失败的问题解决方法
最近在写USB通信的上位机,调用了windows里的DLL,开发环境:64位WIN7 .VS2015.NET4.5.2:开发完成后在自己的电脑可用,在32位电脑.NET其他版本以及WIN10的环境下不 ...
- react中的跨域问题
react中的跨域问题
- 洛谷 1156 dp
洛谷1156 dp 类背包问题 老久没有自己想出来过dp方程了,,,虽然到最后还是只写了30分,,, 设dp[j]表示最大生命值为i时的最大高度,则对于每个物品,可以选择吃掉或者放上去,即转移为dp[ ...
- ASP.NET-model验证
在ASP.NET的model中,可以定义下面的这种属性,来实现前台签证字符串 RegularExpression(@"(|.*(?=.{6,})(?=.*\d)(?=.*[a-zA-Z]). ...