个人总结:

问: 请给我讲一下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?的更多相关文章

  1. react中键盘enter事件处理

    对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...

  2. react中回车enter事件处理

    对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...

  3. React中如何优雅的捕捉事件错误

    React中如何优雅的捕捉事件错误 前话 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...

  4. React中的三大属性

    一.前言: 属性1:state 属性2:props 属性3:ref 与事件处理 二.主要内容: 属性1:state 1,认识: 1) state 是组件对象中最重要的属性,值是一个对象(可以包含多个数 ...

  5. 如何优雅地在React中处理事件响应&&React绑定onClick为什么要用箭头函数?

    React绑定onClick为什么要用箭头函数? https://segmentfault.com/q/1010000010918131 如何优雅地在React中处理事件响应 https://segm ...

  6. React中的合成事件

    React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...

  7. 七天接手react项目 —— state&事件处理&ref

    state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...

  8. 前端必读2.0:如何在React 中使用SpreadJS导入和导出 Excel 文件

    最近我们公司接到一个客户的需求,要求为正在开发的项目加个功能.项目的前端使用的是React,客户想添加具备Excel 导入/导出功能的电子表格模块. 经过几个小时的原型构建后,技术团队确认所有客户需求 ...

  9. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

随机推荐

  1. oracle插入或更新某一个指定列来执行触发器

    表结构: create table TZ_GXSX ( ID VARCHAR2(15), PROJECT VARCHAR2(50), TXYX NUMBER(22) default '0', CDAT ...

  2. Dynamic dispatch mechanisms

    Normally, in a typed language, the dispatch mechanism will be performed based on the type of the arg ...

  3. day02 操作系统与编程语言

    目录 操作系统 操作系统是什么 操作系统做了什么 文件是什么? 为什么要有操作系统 操作系统有什么用 应用程序的启动和操作系统的启动 复盘QQ的启动 操作系统启动的流程 编程语言分类 机器语言 汇编语 ...

  4. Pyhton学习——Day51

    model(数据库模型)------ORM----- 表与表之间的关系(两张表) 一对多 多对多 一对一 ORM------object relation mapping python的类 class ...

  5. node工具是是什么东西

    Node到底是个啥? Node是一个服务器端JavaScript解释器,可是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了,总结:水深不深我还不知道,不过确实不浅 最近写 ...

  6. Extjs toolbar 如何添加竖杆分隔符

    如下: { xtype:'button', text:'学生档案', iconCls:'file', handler:function(){ console.log(222) }, }, {xtype ...

  7. 如何设置,获取,删除cookie?

    cookie : 存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来像访问者电脑上存储数据 1.不同的浏览器存放的cookie位置不一样,也是不能通用的 2.cookie的存储 ...

  8. HTML 编码规范

    语法 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格或 tab 字符 在属性上,使用双引号 "",不要使用单引号 '' 属性名 / 属性值全小写,用中划线 - 做分隔符 ...

  9. 关于使用动态语言运行时 (. net)

    AutoCAD Managed .NET API允许您使用使用. NET 4.0 引入的动态语言运行时 (DLR). 使用DLR可以直接访问对象, 而无需: 打开一个对象进行读取或写入, 然后在完成后 ...

  10. 【codeforces 734F】Anton and School

    [题目链接]:http://codeforces.com/problemset/problem/734/F [题意] 给你两个数组b和c; 然后让你找出一个非负数组a满足题中所给关系; [题解] 有个 ...