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事件绑定的一些见解,如有不对的地方,希望各路大神能提出来,让小弟能涨涨见识

posted @   爱吃巧克力的狗  阅读(2317)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示