为什么有时我会在响应中看到箭头函数以及事件处理程序上的其他函数?

时间:2019-08-21 12:55:27

标签: reactjs

有时我会在react handler上看到它:

<Results onClick={() => this.somefunction()}/>

和其他时间类似:

<Results onChange={this.handleChange} />

这些编写代码方式的邮件有何区别?

2 个答案:

答案 0 :(得分:1)

先前的“提升” someFunction在回调中,以便稍后运行。后者立即在handleChange中查找代码。

此外,您还遇到this的上下文问题。在箭头函数中,this不会将上下文附加到函数本身,而是附加到父上下文。本质上,在每个示例中,this都具有相同的上下文。

答案 1 :(得分:1)

在第一个示例中,somefunction无需担心访问错误的this:它将引用定义在其中的类的实例。

第二个示例 不一定完全相同,具体取决于定义方式:您将需要绑定该函数或使用箭头函数。

实际的反应文档提供了有关以下方面的更多见解:https://reactjs.org/docs/handling-events.html

也:引用身份。第一个示例在每个渲染器上创建一个新函数。它可能会与纯组件混在一起,因为道具会不断变化。第二个示例传递的功能始终相同:纯组件将它们视为与以前相同的道具,并且不会重新呈现不必要的内容。