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事件绑定的一些见解,如有不对的地方,希望各路大神能提出来,让小弟能涨涨见识
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现