- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
自从有了 React Hooks,我决定放弃 React 类组件。我现在只处理钩子(Hook)和功能组件。
简单问题:
我理解在类主体中使用箭头函数而不是常规函数的区别。箭头函数会自动绑定(bind)(lexical this)到我的类的实例,我不必在构造函数中绑定(bind)它。这很好。
但是因为我不再处理类,所以我想知道在功能组件内部执行以下操作有什么区别:
function App() {
// REGULAR FUNCTION
function handleClick1() {
console.log('handleClick1 executed...');
}
// ARROW FUNCTION
const handleClick2 = () => {
console.log('handleClick2 executed...');
}
return(
<React.Fragment>
<div className={'div1'} onClick={handleClick1}>
Div 1 - Click me
</div>
<div className={'div2'} onClick={handleClick2}>
Div 2 - Click me
</div>
</React.Fragment>
);
}
问题
两者都很好。
性能有差异吗?我应该选择一种方式而不是另一种方式吗?它们在每次渲染时都会重新创建,对吗?强>
关于可能重复的注意事项
我真的不认为这是一个重复的问题。我知道关于箭头和正则之间的区别有很多问题,但我想从 React 功能组件的 Angular 以及 React 如何处理它来了解。我环顾四周,没有找到。
用于测试的代码片段
function App() {
function handleClick1() {
console.log('handleClick1 executed...');
}
const handleClick2 = () => {
console.log('handleClick2 executed...');
}
return(
<React.Fragment>
<div className={'div1'} onClick={handleClick1}>
Div 1 - Click me
</div>
<div className={'div2'} onClick={handleClick2}>
Div 2 - Click me
</div>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
.div1 {
border: 1px solid blue;
cursor: pointer;
}
.div2 {
border: 1px solid blue;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
最佳答案
除了您已经指出的差异(词法作用域)之外,箭头函数(和函数表达式)未提升,因此不能在定义之前调用。看我的例子。在我看来这不是问题,因为依赖提升的代码更难推理。
React 真的不关心你使用的是哪一个(它也不能检测到它)。
const A = () => {
const name = getName();
function getName() {
return 'praffn';
}
// Will not work
// const getName = () => 'praffn';
return <p>Hi, {name}</p>;
}
ReactDOM.render(<A/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
关于javascript - React 函数式组件(不再使用类组件)内部的箭头函数和常规函数有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55968738/
当给定两个 bool 参数时,^ 运算符执行异或,例如 true ^ true == false true ^ false == true false ^ true == true false ^ f
我需要下载一个文件(例如: https://www.betaseries.com/srt/391160 )所以我在网上找到了不同的方法: def download(String remoteUrl,
可以说,我们正在计算考试成绩的平均值: 起始考试成绩:75、80、92、64、83、99、79 平均值= 572/7 = 81.714 ... 现在给出81.714,如果您不知道初始测试分数,是否可以
我和一个 friend 正在争论线程池中的线程数应该是处理器计数+ 1还是仅仅是处理器计数。 我之所以选择处理器数量,是因为每个处理器可以分配偶数个线程,而他选择处理器数量+ 1是因为他认为这将帮助他
我已经养成了尽可能使用闭包来代替常规方法的习惯,即使我不需要访问自由变量。所以,我将使用这个: def addNumbers = { 左、右 -> 左 + 右 } ..而不是这个: def addNu
我对 Groovy 非常陌生,我正在尝试《Groovy in Action》书中的这个示例。我有这个 fibonacci.groovy 程序,当尝试使用 java 命令运行该程序时,我收到 NoCla
我有 3 个 TextView 。我需要将它们的权重设置为 Light、Regular 和 Condensed。有人可以帮助我了解如何在 Android 中实现这一点吗? 最佳答案 在 TextVie
如果用户启动我的应用程序并最初选择不允许位置服务,我想通过 UIAlertMessage 提示用户重新考虑(“更新”和“不,谢谢。”)。 “不,谢谢。”这将是一个简单的取消,我希望“更新”将它们直接链
如何在 groovy 中显示一个值是真还是假?我使用 Eclipse 作为我的 IDE。 assert 4 * ( 2 + 3 ) - 6 == 14 //integers only 而且我也
我的问题与“多处理器编程的艺术”一书有关。第4章介绍安全/常规/原子寄存器及其实现。 以下是安全多读取器单写 boolean 寄存器的以下实现,该寄存器基于安全单读取器单写 boolean 寄存器,被
使用下面的代码来保存 float 的值 domainInstance.standardScore = params["standardScore"] as float 在这种情况下,我的输入是 17.
使用下面的代码来保存 float 的值 domainInstance.standardScore = params["standardScore"] as float 在这种情况下,我的输入是 17.
在iOS的about部分中,它具有有关设备的大量信息。 我和我可以访问此信息吗? 我想快速获取settings -> General -> About的数据。在iOS中获得相同的价格是否可行? 最佳答
我正在开发Windows服务,它将承载两件事: WCF服务 用于定期作业执行的“常规” Windows服务(使用Quartz.net) 因此,基本上,一个应用程序(可执行)承载这两种服务类型。 这两种
在mysql中,我有一个名为users的表,其中包含系统中的用户列表... id | name | surname | active ____________________________ 1
所以我在 Debian 服务器上设置了一个 MySQL 数据库,并且它在 phpMyAdmin 客户端上运行良好。我目前正在开发一个项目,编写一个 Java 服务器,该服务器能够通过 JDBC 连接使
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
前两天考试了,其中一道题是把@前面的字母换成新的名字 所以在试卷中我们有 array = "toto@yahoo.com","mimi@yahoo.com".soso@yahoo.com"所以我们应该
大家好 如果字符串语法如下,我如何从字符串中获取数字(正数): t_def_type_id_2 t_def_type_id_22 t_def_type_id_334 所以,在第一个字符串中我想得到 1
我正在寻找不会在内核中阻塞的文件描述符类型。我知道我可以使用 fstat(2) 但 fstat 还会给我各种元数据信息(访问时间等),这些信息可能会阻塞任意时间(特别是在网络文件系统上)。 编辑:我正
我是一名优秀的程序员,十分优秀!