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

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

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

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

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

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

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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

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

76410

在你学习 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 比更混乱。

82510

React Native之React速学教程(下)

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

2.8K50

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

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

1.7K10

【面试题】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方式。

24940

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

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

3.2K40

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

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

2.7K30

TS_React:使用泛型来改善类型

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

5.1K20

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

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

2K40

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

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

1.8K20

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

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

19910

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.5K21

快速了解 React Hooks 原理

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

1.3K10

为什么和 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
领券