摘要:在组件中,每个方法的上下文都会指向该组件的实例,即自动绑定为当前组件而且还会对这种引用进行缓存,以达到和内存的最大化。
在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件,而且react还会对这种引用进行缓存,以达到cpu和内存的最大化。在使用了es6 class或者纯函数时,这种自动绑定就不复存在了,我们需要手动实现this的绑定
以下是几种绑定的方法:
bind方法
直接绑定是bind(this)来绑定,但是这样带来的问题是每一次渲染是都会重新绑定一次bind;
class Home extends React.Component { constructor(props) { super(props); this.state = { }; } del(){ console.log("del") } render() { return (); } }
构造函数内绑定
在构造函数 constructor 内绑定this,好处是仅需要绑定一次,避免每次渲染时都要重新绑定,函数在别处复用时也无需再次绑定
class Home extends React.Component { constructor(props) { super(props); this.state = { }; this.del=this.del.bind(this) } del(){ console.log("del") } render() { return (); } }
::不能传参
如果不传参数使用双冒号也是可以
class Home extends React.Component { constructor(props) { super(props); this.state = { }; } del(){ console.log("del") } render() { return (); } }
箭头函数绑定
箭头函数不仅是函数的"语法糖",它还自动绑定了定义此函数作用域的this,因为我们不需要再对它们进行bind方法:
class Home extends React.Component { constructor(props) { super(props); this.state = { }; } del=()=>{ console.log("del") } render() { return (); } }
以上几种方法都可以实现this绑定,使用那种各自的习惯;
希望大家喜欢,也希望大家指点错误,也可以加入qq群439667347,大家一起讨论,一起进步,后续更新中...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93260.html
摘要:原由写这篇文章主要是为了增强自己的记忆,同时也是为了分享一下我们常用的创建组建的方法,主要是四种,启发来自于不知的博客呀,有兴趣的人可以去看看他的博客叙述我们在用的时候考虑最多的其实就是如何策划组建的划分,组建的嵌套,能够做到更省时省力。 原由:写这篇文章主要是为了增强自己的记忆,同时也是为了分享一下我们常用的创建组建的方法,主要是四种(createClass, component, ...
摘要:方法一必须在这里绑定方法二使用属性初始化器语法需要开启以上方法三在使用时绑定方法四在回调函数中使用箭头函数渲染的时候都会创建一个不同的回调函数。然而如果这个回调函数作为一个属性值传入低阶组件,这些组件可能会进行额外的重新渲染。 从16年夏天初学React,到17年正式投入到工作中使用,直到现在V16.2发版,React发生了巨大的变化,最近在工作中使用时遇到很多基础不是非常清晰,借此再...
摘要:绑定事件处理函数指向的四中方式以及他们的优缺点。内部自己实现了一套高效的事件机制,为了提高框架的性能,通过事件冒泡,只在节点上注册原生的事件,内部自己管理所有组件的事件处理函数,以及事件的冒泡捕获。 前面的文章介绍了 React 的 JSX 语法、组件的创建方式、组件的属性、组件的内部状态以及组件的生命周期。另外,还顺带说了各个知识点要重点注意的事情,以及我在项目实践中的一些经验。如果...
摘要:选择的主要原因大概是因为该框架出现较早,感觉上会相对成熟,日后学习中遇到问题想要查找答案相对简单一些,对,就是这么简单。多说无益,接下来开始的学习,我按照我学习中带着的问题来一一解答,完成我的入门笔记。主要是针对前端的组件化开发。 这两天得空,特意来折腾了以下时下火热的前端框架react,至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论,也就不妄加评论了...
阅读 6527·2021-09-22 15:36
阅读 5478·2021-09-02 10:20
阅读 1824·2019-08-30 15:44
阅读 2608·2019-08-29 14:06
阅读 1093·2019-08-29 11:17
阅读 1524·2019-08-26 14:05
阅读 3023·2019-08-26 13:50
阅读 1510·2019-08-26 10:26