首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么像箭头函数这样的方法可以在react类中工作,而不能在普通类中工作?

箭头函数是ES6中的一种新的函数定义方式,它具有一些特殊的语法和行为。在React类组件中,箭头函数可以正常工作,而在普通类中不能工作的原因是因为箭头函数没有自己的this绑定。

在普通类中,函数内部的this指向调用该函数的对象。而在箭头函数中,this是词法上绑定的,指向箭头函数定义时所在的上下文。在React类组件中,箭头函数作为类的方法时,它的this指向的是组件实例本身,可以直接访问组件的状态和属性。

这种特性使得箭头函数在React类组件中非常方便地用于定义事件处理函数、回调函数等。例如,在React中,可以使用箭头函数来定义onClick事件处理函数,而无需手动绑定this。

然而,在普通类中,如果使用箭头函数作为方法,它的this将指向定义该方法的上下文,而不是实例本身。这可能导致意外的行为和错误的结果。

总结起来,箭头函数在React类组件中可以正常工作,因为它的this指向组件实例,可以方便地访问组件的状态和属性。而在普通类中,箭头函数的this指向定义该方法的上下文,可能导致错误的结果。

相关搜索:状态解构只在箭头函数类方法中工作吗?为什么within exec()函数可以在原始代码中工作,而不能在Python3.7中的函数或类中工作?php array_filter可以在函数中工作,但不能作为方法在类中工作。为什么我的导入可以在pycharm中工作,而不能在命令行中工作?为什么这可以在for循环中工作,而不能在forEach中工作?(数组不是构造函数错误)为什么我的post请求可以在POSTMAN中工作,但不能在react应用程序中工作?有没有更好的方法在基类中做自引用指针,也可以在派生类中工作?为什么像"Point“/ "Rect”/ "Bounds“(等)这样的函数同时在类和类型单元中声明?为什么我的iFrame可以在本地主机上工作,而不能在生产环境中工作?为什么这个查询可以在Android Studio的App Inspection的Database Inspector部分中工作,而不能在Room Query中工作?我可以在子类中使用超类中的方法而不覆盖它吗?为什么它说myPair类没有out的成员?当我在类中定义函数时,它工作得很好Swift/SpriteKit:试图从另一个不工作的类访问另一个类中的函数/方法为什么我在hover上的add类可以在Jsfiddle上工作,而不能在我的网站上工作?我是不是在标题中遗漏了什么?为什么setAttribute 'false‘可以在另一个按钮上工作,而不能在Javascript中的自身上工作?为什么我需要用函数签名来扩展我的case类才能在Spark rdd.mapPartition中工作?静态成员变量只能在类的静态方法中使用,但是为什么我们可以在C++类的构造函数中为静态变量赋值呢?在一个类方法中,两个`unordered_set`s在C++中的交集“不工作”,但与`set`一起工作?有没有一种方法可以在不运行整个类的情况下将类作为参数传递到函数中?在ngStyle和ngClass中,为什么ngStyle不能在没有方括号的情况下工作,而ngClass可以呢?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

我发现了华点:vue规定用普通函数定义方法,为什么react又要我用箭头函数!

如果使用过react和vue,应该发现过一个问题:vue告诉我们不应该把方法、生命周期用箭头函数去定义;而在react的类组件中,把方法写成箭头函数的形式却更方便。...在调用时分别打印this,结果如下: 箭头函数中this正确指向了组件实例,但普通函数中却指向了undefined,为什么?...这样就可以解释为什么react组件中,箭头函数的this能正确指向组件实例。...结语 「为什么react中用箭头函数,vue中用普通函数」这是一个挺很有意思的问题,简单来说,这种差异是由于我们写的react是一个类,而vue是一个对象导致的。...在类中定义只有箭头函数才能根据作用域链找到组件实例;在对象中,只有拥有自身this的普通函数才能被修改this指向,被vue处理后绑定到组件实例。

79610

在你学习 React 之前必备的 JavaScript 基础

子类也可以覆盖父类中定义的方法,这意味着它将使用自己定义的新方法来替换父类方法的定义。...I am Nathan and I am a REACT developer 就这样,我们重写了 Developer 类中的 hello 方法。...在 React 中使用 现在我们了解了 ES6 的类和继承,我们可以理解 src/app.js 中定义的 React 类。...区别在于 const 在声明后不能改变它的值,而 let 则可以。 这两个声明都是本地的,这意味着如果在函数作用域内声明 let ,则不能在函数外部调用它。...总结 React 的优点在于它不会像其他 Web 框架一样在 JavaScript 之上添加任何外部抽象层。 这就是为什么 React 变得非常受 JS 开发人员欢迎的原因。

1.7K10
  • 【愚公系列】2023年03月 其他-Web前端基础面试题(react专项_35道)

    29、使用箭头函数(arrow functions)的优点是什么 30、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象 31、 (在构造函数中)调用 **super(...React在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX 10、为什么不直接更新state状态 如果直接更新state状态,那么它将不会重新渲染组件,而是使用...浏览器只能读取JavaScript对象,而不能读取普通JavaScript对象中的JSX。...29、使用箭头函数(arrow functions)的优点是什么 作用域安全:在箭头函数之前,每一个新创建的函数都有定义自身的 this 值(在构造函数中是 新对象;在严格模式下,函数调用中的 this...在回调中你可以使用箭头函数,但问题是每次组件渲染时都会创建一个新的回调。

    7.6K10

    美团前端一面必会react面试题4

    props 是不可修改的,所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。state 是在组件中创建的,一般在 constructor中初始化 state。...classReact 中通常使用 类定义 或者 函数定义 创建组件:在类定义中,我们可以使用到许多 React 特性,例如 state、 各种组件生命周期钩子等,但是在函数定义中,我们却无能为力,因此...注意:避免在 循环/条件判断/嵌套函数 中调用 hooks,保证调用顺序的稳定;只有 函数定义组件 和 hooks 可以调用 hooks,避免在 类组件 或者 普通函数 中调用;不能在useEffect...(1)当使用箭头函数作为map等方法的回调函数时,箭头函数的作用域是当前组件的实例化对象(即箭头函数的作用域是定义时的作用域),无须绑定作用域。(2)事件回调函数要绑定组件作用域。...(3)父组件传递方法要绑定父组件作用域。总之,在 EMAScript6语法规范中,组件方法的作用域是可以改变的。React中可以在render访问refs吗?为什么?

    3K30

    super(props) 真的那么重要吗?

    在2015年当 React 0.13 增加对普通类的支持时,曾经计划用这样的语法【https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html...重要的是,在调用父类构造函数之前,你不能在构造函数中使用this。 JavaScript 是不会让你这样做的: ?...但是不知道为什么,即便是你调用 super 时没有传递 props 参数,仍然可以在 render 和其他方法中访问this.props。 (不信你可以亲自去试试!) 这是究竟是为什么呢?...如果这种情况发生在从构造函数调用的某个方法中,可能会给调试工作带来很大的麻烦。 这就是为什么我建议总是调用 super(props) ,即使在没有必要的情况之下: ?...那么为什么我们不写成 super(props, context) 呢? 我们当然可以这样做,但是使用context的频率比较低,所以这个坑并没有那么多影响。

    1.3K50

    React 中必会的 10 个概念

    ❞ 目录 箭头函数 默认参数 模板字符串 let 和 const 类 解构 三元运算符 导入/导出模块 async / await 展开运算符 / 不定参数 箭头函数 您可能知道,定义React组件的最简单方法是编写...但是还有另一种更加简洁的方法来创建 React 函数组件。 ? 「箭头函数」是您在 JavaScript 和 React 应用程序中最多见的函数。...通过创建这样的组件,您将可以访问与 React 组件相关的一堆方法和属性(状态,属性,生命周期方法等)。请查看 React 文档以获取 React.Component 类的详细 API 参考。...解构 在 React 中非常经常使用解构。这是一个可以与对象以及数组一起使用的概念。分解是简化 JavaScript 代码的一种简便方法,因为它使我们可以在一行中将数据从对象或数组中拉出。...⚠️请小心,因为 await 不能在常规函数中使用。如果这样做,则会出现语法错误。 值得一提的是 async / await 是如何处理错误。

    6.6K30

    React Hooks 还不如类?

    类令人困惑 我们发现,类可能是学习 React 道路上的一大障碍。你必须了解 this 在 JavaScript 中的工作机制,这和大多数语言中的机制截然不同。你必须记得绑定事件处理程序。...这种事情更像是半吊子的 POC 库会做出来的,而不是像 React 这样的知名库中应该做的。...[……]hooks 使你可以根据各个部分的相关性(例如设置订阅或获取数据)来将一个组件拆分为一些较小的函数,而不是根据生命周期方法强行拆分。 如果你在使用存储,那么上面这段话基本没意义。...隐藏的副作用 在 Funclass 的 useEffect 的实现中,最令我困扰的事情中有一个是,给定组件的副作用有哪些是不清不楚的。...像 React 这样的大型库在 API 中添加如此巨大的更改时必须非常谨慎,而且这里的动机其实并没有那么充分。 8. 缺乏声明性 在我看来,Funclass 比类更混乱。

    84110

    字节前端二面react面试题(边面边更)_2023-03-13

    这样的好处是,可以将数据请求放在这里进行执行,需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。...为什么?被废弃的三个函数都是在render之前,因为fber的出现,很可能因为高优先级任务的出现而打断现有任务导致它们会被执行多次。.... */} ); }}使用箭头函数(arrow functions)的优点是什么作用域安全:在箭头函数之前,每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象;在严格模式下...,函数调用中的 this 是未定义的;如果函数被称为“对象方法”,则为基础对象等),但箭头函数不会,它会使用封闭执行上下文的 this 值。...简单:箭头函数易于阅读和书写清晰:当一切都是一个箭头函数,任何常规函数都可以立即用于定义作用域。

    1.8K10

    React Native之React速学教程(下)

    箭头函数的结构 箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,...5.ES6不再有自动绑定 在ES5中,React.createClass会把所有的方法都bind一遍,这样可以提交到任意的地方作为回调函数,而this不会变化。...定义组件 ES5 在ES5里,通常通过React.createClass来定义一个组件类,像这样: var Photo = React.createClass({ render: function...= { loopsRemaining: this.props.maxLoops, }; } } 4.在方法作为回调上的不同 在开发工作中,经常会使用到回调...中,React.createClass会把所有的方法都bind一遍,这样可以提交到任意的地方作为回调函数,而this不会变化。

    2.8K50

    【面试题】412- 35 道必须清楚的 React 面试题

    经常被误解的只有在类组件中才能使用 refs,但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。 ?...Hooks 可以轻松地操作函数组件的状态,而不需要将它们转换为类组件。...相反,使用像useEffect这样的内置钩子。 问题 18:什么是 React Hooks? 主题: React 难度: ⭐⭐⭐ Hooks是 React 16.8 中的新添加内容。...它们允许在不编写类的情况下使用state和其他 React 特性。使用 Hooks,可以从组件中提取有状态逻辑,这样就可以独立地测试和重用它。...问题 35:如何避免在React重新绑定实例? 主题: React 难度: ⭐⭐⭐⭐⭐ 有几种常用方法可以避免在 React 中绑定方法: 将事件处理程序定义为内联箭头函数 ?

    4.3K30

    React--Component组件浅析

    一 前言在 React 世界里,一切皆组件,我们写的 React 项目全部起源于组件。组件可以分为两类,一类是类( Class )组件,一类是函数( Function )组件。...React 在底层逻辑上会像正常实例化类和正常执行函数那样处理的组件。...因为在 class 类内部,箭头函数是直接绑定在实例对象上的,而第二个 handleClick 是绑定在 prototype 原型链上的,它们的优先级是:实例对象上方法属性 > 原型链对象上方法属性。...2 函数组件ReactV16.8 hooks 问世以来,对函数组件的功能加以强化,可以在 function 组件中,做类组件一切能做的事情,甚至完全取缔类组件。...,即使绑定了也没有任何作用,因为通过上面源码中 React 对函数组件的调用,是采用直接执行函数的方式,而不是通过new的方式。

    32240

    一天梳理完React所有面试考察知识点

    同样也可以写在构造函数constructor()之中,但是不建议这样做。...无状态组件的性能比较高,因为它仅是一个函数,而普通组件是一个class。...作为普通函数使用 call apply bind 改变 this 指向作为对象方法被调用在 class 方法中调用箭头函数,永远是取上级作用域的 this2.手写 bind 函数Function.prototype.bind1...,是在函数定义的地方,向上级作用域查找,不是在执行的地方左右两张图都将打印 100图片补充知识 - thisthis 在各个场景中取什么值,是在函数执行的时候确定的,不是在定义函数定义的时候决定的作为普通函数使用...call apply bind 改变 this 指向作为对象方法被调用在 class 方法中调用箭头函数,永远是取上级作用域的 thiscall 是直接执行,bind是返回一个新的函数去执行图片图片图片

    2.8K30

    一天梳理完React面试考察知识点

    同样也可以写在构造函数constructor()之中,但是不建议这样做。...无状态组件的性能比较高,因为它仅是一个函数,而普通组件是一个class。...作为普通函数使用 call apply bind 改变 this 指向作为对象方法被调用在 class 方法中调用箭头函数,永远是取上级作用域的 this2.手写 bind 函数Function.prototype.bind1...,是在函数定义的地方,向上级作用域查找,不是在执行的地方左右两张图都将打印 100图片补充知识 - thisthis 在各个场景中取什么值,是在函数执行的时候确定的,不是在定义函数定义的时候决定的作为普通函数使用...call apply bind 改变 this 指向作为对象方法被调用在 class 方法中调用箭头函数,永远是取上级作用域的 thiscall 是直接执行,bind是返回一个新的函数去执行图片图片图片

    3.2K40

    TS_React:使用泛型来改善类型

    在像 C++/Java/Rust 这样的传统 OOP 语⾔中,可以「使⽤泛型来创建可重⽤的组件,⼀个组件可以⽀持多种类型的数据」。这样⽤户就可以以⾃⼰的数据类型来使⽤组件。...❝设计泛型的「关键⽬的」是在「成员之间提供有意义的约束」,这些成员可以是:类的实例成员、类的⽅法、函数参数和函数返回值。...箭头函数在jsx中的泛型语法 在前面的例子中,我们只举例了如何用泛型定义常规的函数语法,而不是ES6中引入的箭头函数语法。...// ES6的箭头函数语法 const identity = (arg) => { return arg; }; 原因是在使用JSX时,TypeScript 对箭头函数的处理并不像普通函数那样好。...利用泛型处理Hook ❝Hook只是普通的JavaScript函数,只不过在React中有点额外调用时机和规则。由此可见,在Hook上使用泛型和在普通的 JavaScript 函数上使用是一样的。

    5.2K20

    一文看懂如何使用 React Hooks 重构你的小程序!

    很多新手应该会被 Class 组件绑定事件的 this 迷惑过,绑定事件可以用 bind,可以直接写箭头函数,也可以写类属性函数,但到底哪种方法才是最好的呢?...简单来说,Hooks 就是一组在 React 组件中运行的函数,让你在不编写 Class 的情况下使用 state 及其它特性。...但我们可以稍微改一下代码,把事件处理函数改为箭头函数。如果是这样代码就跑不了了。...真正有必要的是把我们的 interval 变量作为一个 ref,我们在函数最顶层的作用域把 interval 作为一个 ref,这样我们就可以在这个函数的任何一个地方把他清除,而原来的代码中我们把 interval...不能在嵌套函数中调用 我想请大家思考一下,为什么一个 Hook 函数需要满足以上的需求呢?

    2.1K40

    Vue 选手转 React 常犯的 10 个错误,你犯过几个?

    总是将它们包装到代理中,或者在初始化时像许多“反应式”解决方案那样做其他工作。这也是为什么 react 允许您将任何对象置于状态(无论有多大)而没有额外的性能或正确性陷阱。...这种方法有时会奏效,但在有些情况下会造成一些相当大的问题。随着你对React的工作原理有了更深的了解,你就能根据具体情况来判断它是否没问题。...}) ); } 在JavaScript中,我们不允许像这样返回多个东西。...> 为什么要这样做?...如果你从 useEffect 钩子函数返回任何东西,它必须是一个清理函数,此函数将在组件卸载时运行。相当于类组件中的 componentWillUnmount 生命周期方法。

    23610

    35 道咱们必须要清楚的 React 面试题

    经常被误解的只有在类组件中才能使用 refs,但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。...Hooks 可以轻松地操作函数组件的状态,而不需要将它们转换为类组件。...相反,使用像useEffect这样的内置钩子。 问题 18:什么是 React Hooks? 主题: React 难度: ⭐⭐⭐ Hooks是 React 16.8 中的新添加内容。...它们允许在不编写类的情况下使用state和其他 React 特性。使用 Hooks,可以从组件中提取有状态逻辑,这样就可以独立地测试和重用它。...主题: React 难度: ⭐⭐⭐⭐⭐ 有几种常用方法可以避免在 React 中绑定方法: 1.将事件处理程序定义为内联箭头函数 class SubmitButton extends React.Component

    2.6K21

    前端常考react相关面试题(一)

    需要使用状态操作组件的(无状态组件的也可以实现新版本react hooks也可实现) 总结: 类组件可以维护自身的状态变量,即组件的 state ,类组件还有不同的生命周期方法,可以让开发者能够在组件的不同阶段...使用箭头函数(arrow functions)的优点是什么 作用域安全:在箭头函数之前,每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象;在严格模式下,函数调用中的 this 是未定义的...;如果函数被称为“对象方法”,则为基础对象等),但箭头函数不会,它会使用封闭执行上下文的 this 值。...在工作中,更好的方式是使用 React组件生命周期之——“存在期”的生命周期方法,而不是依赖这个回调函数。...为何React事件要自己绑定this 在 React源码中,当具体到某一事件处理函数将要调用时,将调用 invokeGuardedCallback方法。

    1.8K20

    为什么和 CSS-in-JS 说拜拜

    如果使用普通的CSS,则可以将所有.css文件放在 src/styles 目录中,而所有的React组件都在 src/components 中。随着应用程序的大小的增长,很难判断每个组件使用哪些样式。...虽然我没有测量过这一点,但我相信影响Emotion如何执行的最重要因素之一是样式序列化是在React渲染循环内部还是外部执行的。 Emotion文档中的例子是在render里面进行序列化的,像这样。...如果MyComponent频繁地渲染(例如每次按键),重复的序列化可能会有很高的性能代价。 一个更有效的方法是把样式移到组件之外,这样序列化就会在模块加载时一次性发生,而不是在每次渲染时。...为了改进DX,我们决定引入一个实用类系统。实用类就是是在元素上设置一个单一的CSS属性的CSS类。通常情况下,结合多个实用类来获得所需的样式。对于上面的例子,可以这样写。...像本例中的 color prop 这样的动态样式不能在构建时提取,所以Compiled使用 style prop(又称内联样式)将该值添加为CSS变量。

    2.4K20

    快速了解 React Hooks 原理

    为了保证的可读性,本文采用意译而非直译。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 我们大部分 React 类组件可以保存状态,而函数组件不能?...React 早期版本,类组件可以通过继承PureComponent来优化一些不必要的渲染,相对于函数组件,React 官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染,直接 16.6 出来的...React 16.8 新出来的Hook可以让React 函数组件具有状态,并提供类似 componentDidMount和componentDidUpdate等生命周期方法。 类被会替代吗?...Hooks不会替换类,它们只是一个你可以使用的新工具。React 团队表示他们没有计划在React中弃用类,所以如果你想继续使用它们,可以继续用。...React团队整合了一组很棒的文档和一个常见问题解答,从是否需要重写所有的类组件到钩Hooks是否因为在渲染中创建函数而变慢? 以及两者之间的所有东西,所以一定要看看。

    1.4K10
    领券