react的每个方法为什么一定要bind this
一开始学习react的时候就了解了react的每个方法都要bind(this)或者使用箭头函数绑定this的指向,到底是为什么要这么写呢,当时要学习的东西太多了就没在意,今天特别好奇(不搞懂不吃饭的态度),就深入学习一下
SyntheticEvent是个什么东西
react官网有一节介绍了SyntheticEvent,大家可以去官网了解一下,我也就是简单了解了一下,dom树上绑定事件是耗性能的,一个页面,如果你在dom节点上绑了很多事件,但是用户就点了几个按钮,那其他事件绑上去岂不是浪费了?
react就考虑到了这一点,你在render里绑定的事件并不是真的绑在真实dom上的(绑在虚拟dom上),而是在document这个根节点上绑了个SyntheticEvent,当用户点击的时候事件冒泡到document上,SyntheticEvent收到后再在真实dom上通过
回调(回调是重点)执行你在render上绑定的事件。
当然SyntheticEvent还解决了浏览器兼容性的问题。
this的指向
<button onClick={this.add}>add</button>
一个button绑定了组件中(this中)一个叫add的方法,前面说了SyntheticEvent被触发时是回调this里面的add方法,也就是说执行add方法并不是当前组件这个this,自然add方法里也获取不到当前组件这个this了,所以需要你自己去绑定上去啦。
回调可能还有些不理解,这里有个例子
class Cat {
sayThis () {
console.log(this); // 这里的 `this` 指向谁?
}
exec (cb) {
cb();
}
render () {
this.exec(this.sayThis);
}
}
const tom = new Cat();
tom.render(); // 输出结果是什么?
网上抄的例子,大家看一下例子应该明白了什么叫回调会改变this了
以上就是本人对react事件绑定的一些见解,如有不对的地方,希望各路大神能提出来,让小弟能涨涨见识
react的每个方法为什么一定要bind this的更多相关文章
- JsPlumb在react的使用方法及介绍
JsPlumb在react的使用方法及介绍 一.相关资料来源: 1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_ ...
- [react 基础篇]——React.createClass()方法同时创建多个组件类
react 组件 React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类 一个组 ...
- react 实现pure render的时候,bind(this)隐患
react 实现pure render的时候,bind(this)隐患 export default class Parent extends Component { ... render() { c ...
- react生命周期方法有哪些?
react生命周期方法有哪些? React 16.3+ getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用.需要使用派生状态的情况是很罕见的 comp ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- react事件处理函数中绑定this的bind()函数
问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export def ...
- react入门-组件方法、数据和生命周期
react组件也像vue一样,有data和methods,但是写法就很不同了: <!DOCTYPE html> <html lang="en"> <h ...
- jQuery方法区别(四)click() bind() live() delegate()区别
click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: $ ...
- react做股票、期货交易遇到的问题(不完全是react)及解决方法。
公司项目主要是做股票及期货行情展示及交易,h5相应的做了一些功能---可以看行情图及模拟交易,实盘交易存在一定的风险,老板希望做自己的产品,这样h5就尴尬了,不过没关系,项目里还是有一定技术含量的-- ...
随机推荐
- python之数据驱动ddt操作(方法二)
import unittestfrom ddt import ddt,unpack,datafrom selenium import webdriverfrom selenium.webdriver. ...
- 构建高效Presubmit卡点,落地测试左移最佳实践
樊登有一节课讲的挺有意思,说中国有个组织叫绩效改进协会,专门研究用技控代替人控的事情.其用麦当劳来举例子,他说麦当劳其实招人标准很低,高中文凭就可以,但是培养出来的人,三五年之后,每一个都是大家争抢的 ...
- 微信小程序云开发-云存储的应用-识别营业执照
一.准备工作 1.创建云函数identify 二.云函数identify中index.js代码 1 // 云函数入口文件 2 const cloud = require('wx-server-sdk' ...
- debian 9安装细节
1.安装KDE桌面 2.开机桌面正常启动,首先在grub启动界面,按"e"键,在linux......quiet后面加上nomodeset,然后进入桌面,在终端输入: su -vi ...
- SQL修改列名,增加列,删除列语句的写法
1.修改数据表名 ALTER TABLE [表名.]OLD_TABLE_NAME RENAME TO NEW_TABLE_NAME; 2.修改列名 ALTER TABLE [表名.]TABLE_NAM ...
- 基于STC51单片机的霓虹灯
基于STC51单片机的霓虹灯 设计要求: 使用PWM驱动8个LED灯 人眼不能观察到灯光全灭 灯光要有动画效果 设计概述: 按照设计要求,为了更直观的说明脉冲宽度调制技术(PWM),所以霓虹灯的 ...
- AAAI 2021 最佳论文公布
作者:Synced 翻译:仿佛若有光 第三十五届 AAAI 人工智能会议 (AAAI-21) 以虚拟会议的形式拉开帷幕.组委会在开幕式上公布了最佳论文奖和亚军.三篇论文获得了最佳论文奖,三篇被评为 ...
- vue 子目录配置,负载均衡 nginx
1. 我使用的是,腾讯云做负载均衡. 负载均衡配置: https://www.xxxx.com/vue 域名指向的服务器地址:10.10.10.10:80/vue 2. nginx 配置: ser ...
- Java的equsals和==
先上结论:在我们常用的类中equals被重写后,作用就是为了比较对象的内容,==是比较对象的内存地址.但并不能说所有的equals方法就是比较对象的内容. Java 中的==: 1.对于对象引用类型: ...
- 黑盒渗透测试【转自HACK学习-FoxRoot】
因 搜到一篇写渗透测试步骤比较详细的文章,转过来学习,方便时常看看. 内容如下: 一.信息搜集 主动/被动搜集 信息搜集分为主动信息搜集和被动信息搜集. 主动信息搜集就是通过直接访问和扫描信息的方式进 ...