前言:Reactjs中的定义的方法其实是基于实例的原型方法;es6默认严格模式
 
问题:在Reactjs组件中写入以下代码,那么执行结果会是什么呢?
···
结果是这样的:
对的,你没看错,不是dom元素,也不是window,更不是组件实例。
 

场景一:
 
场景二:
 
场景三:
 
场景四:
 
场景五:原生dom事件监听
  • 当代码被内联处理函数调用时,它的this指向监听器所在的DOM元素
  • 当代码被包括在函数内部执行时,在非严格模式指向全局对象window, 在严格模式指向undefined
 

总结:
  • 在Reactjs不绑定this,就会出现场景三的现象。
  • 为了保证方法内部this始终指向当前实例,建议绑定this,如场景四。

Reactjs组件中的方法为什么绑定this?的更多相关文章

  1. 微信小程序自定义组件的使用以及调用自定义组件中的方法

    在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...

  2. Angular 4 父组件调用子组件中的方法

    1. 创建工程 ng new demo3 2. 创建子组件 ng g component child 3. 在子组件中定义方法greeting 4. 父组件html(第三行是模板中调用子组件的方法) ...

  3. 父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

    子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandlecl ...

  4. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

  5. ListView组件中 onEndReached 方法在滚动到距离列表最底部一半时执行

    初次使用ListView,在写列表滚动到最底部自动加载使用到方法onEndReached, 发现: ListView组件中 onEndReached 方法在滚动到距离列表最底部一半时执行, 于是翻看文 ...

  6. 【Vue项目笔记】—— 父子组件之间传递参数和子组件执行父组件中的方法

    父组件(MyBlog.vue) <template> <!-- Delete Modal --> <!-- 注意:这里的@deleteBlog中的deleteBlog要和 ...

  7. react:在一个组件中调用别的组件中的方法

    先介绍一下要解决的问题:react中一个组件A和一个组件B,其中B是被connect(connect是redux中的方法)包装过的组件,包装成BContainer,A和BContainer的关系是兄弟 ...

  8. 父组件中vuex方法更新state,子组件不能及时更新并渲染的解决方法

    场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...

  9. vue.js 父组件如何触发子组件中的方法

    组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...

随机推荐

  1. idea中classpath的问题

    新创建的项目,在web.xml中配置 Spring MVC 的 DispatcherServlet,,指定springmvc.xml,结果这部分出错,请求的时候报错 结果查找,发现在Idea中,cla ...

  2. Linux查看显示编辑文本文件

    1:cat -bash-4.1$ cat --help 用法:cat [选项]... [文件]... 将[文件]或标准输入组合输出到标准输出. -A, --show-all           等于- ...

  3. Java 两次MD5

    导入: import org.apache.commons.codec.digest.DigestUtils; 代码: public static String md5(String src) { r ...

  4. 【Vue】动态加载Html片段

    在编写Vue页面的时候,会碰到这么一个需求.由于页面组件比较多,不可能一次性将所有的页面都打包,只能按需获取相应的页面进行显示. 比如有一个App页面,需要异步获取html片段通过v-html指令加载 ...

  5. FbinstTools制作多系统启动U盘(Windows+Linux)

    U盘启动盘制作工具在国内有倆工具,老毛桃.大白菜.也不知道是谁模仿谁的,反正PE肯定是Microsoft的. PE其实就是精简版的Windows维护系统,那如何制作Linux启动盘呢,百度搜“linu ...

  6. 平滑升级nginx到新版本

    这里测试一下nginx的平滑升级,以备不时之需 查看nginx版本号: [root@zklf-server01 ~]# /application/nginx/sbin/nginx -V nginx v ...

  7. Windows远程桌面相关

    3389端口是Windows系统远程终端服务以及系统远程桌面服务默认所使用的端口,原本是为了管理人员能够方便的远程维护管理计算机而设计的,但如今已经成为了黑客们最喜爱的一种人侵途径,入侵者通过3389 ...

  8. python-MYSQL(包括ORM)交互

    1.首先,我们必须得连上我们的MYSQL数据库.个人遇到连不上MYSQL数据的问题主要有:数据库的权限问题.数据库表权限的问题 同时获取数据库中的数据等. //==================== ...

  9. Winform消息与并行的形象比喻

    有一次我给同事讲述跨线程调用时使用了高速行驶的并行列车来比喻,感觉比较形象. 线程列车 多线程就像多个并行的列车,每个线程在各自的轨道上不断向前行驶.主界面所在的线程称为UI线程,也叫主线程,主线程依 ...

  10. C\C++ 内存对齐现象

    前几天一个在自学C语言的小伙伴问了我个问题,C语言结构体储存所占空间为啥和自己预测的不一样.看一下下面这一段代码: struct node{ int num; char ch; }a; printf( ...