为什么这个箭头函数没有初始化器？这个语法React是独占的吗？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React--7: 组件的三大核心属性1:state

要把函数的返回值赋过来，onClick="demo()" 是一个赋值语句，把右边的返回值赋值给onClick作为回调。demo函数的返回值是什么？是undefined。现在点击是没有效果的。...state没有被定义，那么究其根源是什么没有呢？是this。为什么会没有this呢？首先这个函数是我们自定义的函数，而Babel在将我们的jsx转为js的时候是严格模式。...精简代码 3.1 去掉构造器为什么写构造器？因为要做一些初始化的操作。感不感觉是没地方写了才写到构造器里的。类中是可以直接写赋值语句的。所以给state赋值，不需要非得写在构造器中。...isHot}) console.log(isHot) } 那么为什么那？箭头函数是没有this的，那在箭头函数里使用 this 会报错吗？...可以发现是组件的实例对象。 3.3 完整代码简化后，可以不需要写构造器了，自定义方法要用赋值语句的形式+箭头函数。

1.5K2 0

【愚公系列】2023年03月其他-Web前端基础面试题（react专项_35道）

29、使用箭头函数(arrow functions)的优点是什么 30、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象 31、 (在构造函数中)调用 **super(...props)** 的目的是什么 32、 React的工作原理 33、除了在构造函数中绑定 this ，还有其它方式吗 34、何为 Children 35、什么是属性代理一、react篇 1、react...一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。...29、使用箭头函数(arrow functions)的优点是什么作用域安全：在箭头函数之前，每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象；在严格模式下，函数调用中的 this...在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。

7.6K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

我们编写 React 组件的最佳实践

现在来一行一行的编写我们的组件：导入 CSS 我喜欢，但是这个概念还比较新，现在也并没有成熟的解决方案，所以我们在每个组件里面去引用 CSS 初始化 State 当然你也可以选择在构造函数里面去初始化...像上面的例子一样，每个 prop 都独占一行装饰器(Decorators) 如果你使用了类似 mobx 的库，你可以这样去装饰你的 Class 组件修改函数式组件使用 decorators 很灵活并且可读...如果你不想使用装饰器，可以这么做：闭包避免像下面注释的地方一样传递新的闭包给子组件：这种方式的好处是每次render，不会重新创建一个函数，没有额外的性能损失。...props 就是在获取函数的参数值，我们可以直接用的解构：我们也可以使用默认参数值去设置，就像上面的避免使用下面的 ES6 语法：看起来很先（逼）进（格），但这个函数是匿名的。...当然如果组件分的足够细，你可能不会用到这么复杂的条件判断。此外，如果你只在一个表达式里面去渲染组件，避免这么做：你可以使用短路语法：总结这篇文章对你有帮助吗？

7177 0

【React深入】React事件机制

关于React事件的疑问 1.为什么要手动绑定 this 2. React事件和原生事件有什么区别 3. React事件和原生事件的执行顺序，可以混用吗 4....React事件如何解决跨浏览器兼容 5.什么是合成事件下面是我阅读过源码后，将所有的执行流程总结出来的流程图，不会贴代码，如果你想阅读代码看看具体是如何实现的，可以根据流程图去源码里寻找。...，并没有指定调用的组件，所以不进行手动绑定的情况下直接获取到的 this是 undefined。...这里可以使用实验性的属性初始化语法，也就是直接在组件声明箭头函数。箭头函数不会创建自己的 this，它只会从自己的作用域链的上一层继承 this。...React 根据 W3C 规范定义了这个合成事件，所以你不需要担心跨浏览器的兼容性问题。事件处理程序将传递 SyntheticEvent 的实例，这是一个跨浏览器原生事件包装器。

1.2K4 0

React 事件处理(下)

你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。...如果你正在使用实验性的属性初始化器语法，你可以使用属性初始化器来正确的绑定回调函数： class LoggingButton extends React.Component { // 这个语法确保了...return ( Click me ); } } 如果你没有使用属性初始化器语法...在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。...值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，例如: class Popper extends React.Component{

1.2K4 0

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

但有趣的是，为了达到同样的目的，一个是不能使用箭头函数，一个是使用箭头函数便能解决 react vue React中this的丢失首先来看看react，这是一个很普通的类组件写法： class Demo...我们知道，箭头函数没有自己的this，用到的时候只能根据作用域链去寻找最近的那个。放在这里，也就是构造函数这个作用域中的this——组件实例。...这样就可以解释为什么react组件中，箭头函数的this能正确指向组件实例。...普通函数都有自己的this，所以绑定完后，被调用时都能正确指向组件实例。但箭头函数没有自己的this，便无从谈及修改，它只能去找父级作用域中的this。这个父级作用域是谁呢？是组件实例吗？...结语「为什么react中用箭头函数，vue中用普通函数」这是一个挺很有意思的问题，简单来说，这种差异是由于我们写的react是一个类，而vue是一个对象导致的。

7961 0

React 组件基础

组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签。函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null。...它并没有进行跳转。 2.3 事件绑定，传递额外参数有的时候，我们需要传递一些自己需要的参数，那这个时候该怎么做？...很简单，我们直接看示例效果： 3、组件状态一个前提：在react hook出来之前，函数式组件是没有自己的状态的，所以我们统一通过类组件来讲解步骤：初始化状态 ——>读取状态——>修改状态—...来获取状态 3.3 修改状态 4、事件绑定 this 指向箭头函数 Function.prototype.bind() class 的实例方法 4.1 箭头函数利用箭头函数自身不绑定this的特点...与组件实例绑定到一起 4.3 class 的实例方法利用箭头函数形式的class实例方法注意：该语法是实验性语法，但是，由于babel的存在可以直接使用大家喜欢哪一种呢？

1.3K3 0

社招前端常见react面试题（必备）_2023-02-26

此函数必须保持纯净，即必须每次调用时都返回相同的结果。 React中constructor和getInitialState的区别? 两者都是用来初始化state的。...前者是ES6中的语法，后者是ES5中的语法，新版本的React中已经废弃了该方法。...在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。...（3）组件事件回调函数方法的作用域是组件实例化对象（绑定父组件提供的方法就是父组件实例化对象），无法改变。在 EMAScript6语法规范中，关于作用域的常见问题如下。...（1）当使用箭头函数作为map等方法的回调函数时，箭头函数的作用域是当前组件的实例化对象（即箭头函数的作用域是定义时的作用域），无须绑定作用域。（2）事件回调函数要绑定组件作用域。

1.6K1 0

react的事件处理为什么要bind this 改变this的指向？

react的事件处理会丢失this,所以需要绑定,为什么会丢失this?...这句话大概意思就是,你要小心jax回调函数里面的this,class方法默认是不会绑定它的让我十分疑惑,在我的知识范围理解中,class是es6里面新增的方法,不就用来继承原有对象上的属性和方法创建新的对象吗...就是代替原来的构造函数的一种更清晰的方式,为什么就不会绑定this呢? 可是查阅了一些es6的文档,并不是这样的啊,和class方法没啥关系吧,为什么要它背锅呢?...prevState.isToggleOn })); } 第三种,调用的时候使用箭头函数 render() { return ( 是jsx语法,渲染的时候会把{}里面包裹的代码先解析一遍,因为如果加了括号,直接就执行了里面的函数,就没有东西了,但是这个时候,this是可以拿到的 class App extends Component

1.3K3 0

React教程（详细版）

②使用jsx语法创建（就是最开始的那种方式）这里可能会有小伙伴会问，为什么不用js来创建dom呢？...上述将state和自定义方法直接写在了类中，这样写的意思就是说，给类组件的实例对象添加了一个state属性和自定义方法，而且这里的自定义方法必须写成箭头函数的形式，因为箭头函数内部是没有this指向的，...+箭头函数的方式来实现，所以一般开发过程中都不写构造器，还有就是如果一定要写构造器，那么构造器是否接受props，是否传递给props，取决于是否要在构造器中通过this访问props 函数组件中的...不难理解，这里是箭头函数，本身没有this指向，所以这个this得看外层的，该函数外层是render函数体内，所以this就是组件实例对象，所以ref={c=>this.input1=c}意思就是给组件实例对象添加一个...还能正常+1吗？答案：是可以正常+1，为什么呢？

1.8K2 0

字节前端二面react面试题（边面边更）_2023-03-13

两者的参数是不相同的，而getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。...区别：对于事件名称命名方式，原生事件为全小写，react 事件采用小驼峰；对于事件函数处理语法，原生事件为字符串，react 事件为函数；react 事件不能采用 return false 的方式来阻止浏览器的默认行为.... */} ); }}使用箭头函数(arrow functions)的优点是什么作用域安全：在箭头函数之前，每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象；在严格模式下...，函数调用中的 this 是未定义的；如果函数被称为“对象方法”，则为基础对象等)，但箭头函数不会，它会使用封闭执行上下文的 this 值。...开发者总是可以查找 next-higher 函数语句，以查看 this 的值何为 JSXJSX 是 JavaScript 语法的一种语法扩展，并拥有 JavaScript 的全部功能。

1.8K1 0

React Hooks 还不如类？

没有不稳定的语法提案（https://babeljs.io/docs/en/babel-plugin-transform-class-properties/），代码就非常冗长 [……]React 中函数和类组件之间的区别...好的，我同意当你刚开始使用 Javascript 时，this 可能会有些令人头疼，但是箭头函数解决了这种困惑；而且调用一个 Typescript 已经开箱支持的阶段 3 特性都被称作是“不稳定的语法提案...类的语法是精心设计的，以便处理多实例的概念和实例范围的概念（this 就是做这个的）。Funclass 只是用错误的拼图达到相同目标的一种怪异方法。...没有存储，所有状态逻辑都必须在类内部实现，那么这个类当然会膨胀。但是同样，React 似乎正在解决一个大多数情况下都是因为没有状态管理工具才会出现的问题。...遗憾的是我们仍然需要在 componentWillUnmount 中手动做最后的清理工作。同样，从渲染器中调用效果函数也有点难看。

8411 0

大厂的面试题

讲express的中间件系统是如何设计的使用es5实现es6的class websocket握手过程浏览器的事件循环和nodejs事件循环的区别 JavaScript的sort方法内部使用的什么排序...DIFF算法为什么是O(n)复杂度而不是O(n^3) http code码? 移动端rem布局如何实现? 简述原理? TCP三次握手的过程, get post请求的区别 ?...静态文件的浏览器缓存如何实现? 前端跨域方案 ES6 generator函数简述数组去重实现? js浮点数运算不精确如何解决?...的区别 new 操作符原理（手动实现 new 给出思路）箭头函数，箭头函数 this 问题，箭头函数是否可以被 new promise 知道吗，手写一个 promise 怎么写（说思路） promise.all...csrf、xss，如何预防 babel 的编译原理，抽象语法树 CSS 动画、CSS 对网页性能优化浏览器渲染原理、回流与重绘 JS 单线程、EventLoop、宏队列、微队列 session 和 cookie

1.8K2 0

React 中必会的 10 个概念

❞ 目录箭头函数默认参数模板字符串 let 和 const 类解构三元运算符导入/导出模块 async / await 展开运算符 / 不定参数箭头函数您可能知道，定义React组件的最简单方法是编写...但是还有另一种更加简洁的方法来创建 React 函数组件。 ? 「箭头函数」是您在 JavaScript 和 React 应用程序中最多见的函数。...介绍了基本语法，让我们了解如何将箭头函数与 React 一起使用。除了如上所述定义 React 组件之外，箭头函数在操作数组以及使用异步回调和 Promise 时也非常有用。...ES6+ 的这一功能使它能够使用默认值初始化函数，即使函数调用不包含相应的参数也是如此。但是首先，您还记得我们在 ES6 之前使用过的方法来检查函数中未声明的参数吗？...没有它，任何未初始化的参数将默认为值 undefined。因此，这是我们在ES6之前如何处理默认参数的简短摘要。在 ES6 中定义默认参数要容易得多。 ?

6.6K3 0

高频react面试题自检

修改由 render() 输出的 React 元素树对componentWillReceiveProps 的理解该方法当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化...而replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了。...否则只需要写super()使用箭头函数(arrow functions)的优点是什么作用域安全：在箭头函数之前，每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象；在严格模式下，函数调用中的...this 是未定义的；如果函数被称为“对象方法”，则为基础对象等)，但箭头函数不会，它会使用封闭执行上下文的 this 值。...**虚拟 DOM 的优越之处在于，它能够在提供更爽、更高效的研发模式（也就是函数式的 UI 编程方式）的同时，仍然保持一个还不错的性能。React组件的构造函数有什么作用？它是必须的吗？

8701 0

一名中高级前端工程师的自检清单-React 篇

你真的了解 React 吗？我们在面试中往往涉及 React 时，第一个问题就是“解释 React 是什么”。解释一种技术是什么，在面试中也是非常常见的引起话题的题目。...说说对 React 的理解，有哪些特性官方的解释:React 是一个 UI 库，它的核心思想是UI=F(data), 即界面的呈现是由函数传入的参数决定的开发者不再需要关心界面时如何渲染的，只要关心数据的生成和传递...说说 React 声明周期有哪些不同阶段,每个阶段对应的方法是什么 image.png 4.1 创建阶段 constructor():组件的构造函数，组件更新到界面上之前会先调用用于初始化内部状态,...为什么要重新设计出一个合成事件合成事件是 React 自定义的事件对象，它符合 W3C 规范，在底层抹平了不同浏览器的差异，在上层面向开发者暴露统一的、稳定的、与 DOM 原生事件相同的事件接口。...箭头函数函数组件没有实例，因此没有this const App = () => { handleClick = (e) => { console.log(e); }; return

1.5K2 0

一名中高级前端工程师的自检清单-React 篇

你真的了解 React 吗？我们在面试中往往涉及 React 时，第一个问题就是“解释 React 是什么”。解释一种技术是什么，在面试中也是非常常见的引起话题的题目。...说说对 React 的理解，有哪些特性官方的解释:React 是一个 UI 库，它的核心思想是UI=F(data), 即界面的呈现是由函数传入的参数决定的开发者不再需要关心界面时如何渲染的，只要关心数据的生成和传递...说说 React 声明周期有哪些不同阶段,每个阶段对应的方法是什么 image.png 4.1 创建阶段 constructor():组件的构造函数，组件更新到界面上之前会先调用用于初始化内部状态,...为什么要重新设计出一个合成事件合成事件是 React 自定义的事件对象，它符合 W3C 规范，在底层抹平了不同浏览器的差异，在上层面向开发者暴露统一的、稳定的、与 DOM 原生事件相同的事件接口。...箭头函数函数组件没有实例，因此没有this const App = () => { handleClick = (e) => { console.log(e); }; return

1.4K2 0

一名中高级前端工程师的自检清单-React 篇

你真的了解 React 吗？我们在面试中往往涉及 React 时，第一个问题就是“解释 React 是什么”。解释一种技术是什么，在面试中也是非常常见的引起话题的题目。...说说对 React 的理解，有哪些特性官方的解释:React 是一个 UI 库，它的核心思想是UI=F(data), 即界面的呈现是由函数传入的参数决定的开发者不再需要关心界面时如何渲染的，只要关心数据的生成和传递...（在我们的示例中，它指向 React.Component 实现。）在调用父类的构造函数之前，你是不能在 constructor 中使用 this 关键字的。...为什么要重新设计出一个合成事件合成事件是 React 自定义的事件对象，它符合 W3C 规范，在底层抹平了不同浏览器的差异，在上层面向开发者暴露统一的、稳定的、与 DOM 原生事件相同的事件接口。...箭头函数函数组件没有实例，因此没有this const App = () => { handleClick = (e) => { console.log(e); }; return

1.4K2 1

新手学习 react 迷惑的点(完整版)

为什么要用 className 而不用 class React 一开始的理念是想与浏览器的 DOM API 保持一直而不是 HTML，因为 JSX 是 JS 的扩展，而不是用来代替 HTML 的，这样会和元素的创建更为接近...为什么要调用 super 其实这不是 React 的限制，这是 JavaScript 的限制，在构造函数里如果要调用 this，那么提前就要调用 super，在 React 里，我们常常会在构造函数里初始化...如果你不能理解的话，还是 js 的基础没有打好。 React 是如何处理事件的？咱们先来了解一下 React 是如何处理事件的。...如果你能理解输出的是 undefined，那么我觉得你就可以理解为什么需要 bind this 了。那么你可能会问：为什么React没有自动的把 bind 集成到 render 方法中呢?...那表现出异步的原理是怎么样的呢？直接讲源码肯定篇幅不够，可以看这篇文章：你真的理解setState吗？。

9532 0

新手学习 react 迷惑的点(完整版)

为什么要用 className 而不用 class React 一开始的理念是想与浏览器的 DOM API 保持一直而不是 HTML，因为 JSX 是 JS 的扩展，而不是用来代替 HTML 的，这样会和元素的创建更为接近...为什么要调用 super 其实这不是 React 的限制，这是 JavaScript 的限制，在构造函数里如果要调用 this，那么提前就要调用 super，在 React 里，我们常常会在构造函数里初始化...如果你不能理解的话，还是 js 的基础没有打好。 React 是如何处理事件的？咱们先来了解一下 React 是如何处理事件的。...如果你能理解输出的是 undefined，那么我觉得你就可以理解为什么需要 bind this 了。那么你可能会问：为什么React没有自动的把 bind 集成到 render 方法中呢?...那表现出异步的原理是怎么样的呢？直接讲源码肯定篇幅不够，可以看这篇文章：你真的理解setState吗？。

8501 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭