blocks|key|120318|text|在第一种情况下，您使用handleChange作为事件处理程序。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|120319|在第二种情况下，您使用一个新函数作为事件处理程序，然后调用handleChange。|120320|区别在于，在第二个示例中将有两个函数调用。否则它们是一样的。|120321|换句话说，没有必要使用第二种形式，它甚至可能对改版不利。|120322|entityMap^0|B|C|0|T|C|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|U|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|M|$]]

In the first case you are using <code>handleChange</code> as event handler.

In the second case you are using a new function as event handler, which in turn calls <code>handleChange</code>.

The difference is that there will be two function calls in the second example. Otherwise they are the same.

In other words: there is no need to use the second form, and it can even be disadvantageous for rerendering.

blocks|key|120394|text|第二种情况是创建一个anonymous+function，它执行handleChange方法，从而为它提供context。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|120395|每次function组件呈现时，都会在第二种情况下创建一个新函数，而不是在第一种情况下创建，因为向处理程序提供了相同的handleChange方法引用。|120396|您可能还想看看箭头如何在呈现中实现上下文绑定|120397|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/47679673/how-does-event-handlers-with-arrow-functions-achieve-context-binding/47680408#47680408^0|A|I|W|C|1H|7|0|0|7|F|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|J|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

The second case an <code>anonymous function</code> is created which executes the <code>handleChange</code> method and and thereby providing it the <code>context</code>.

Everytime the React component renders, a new function is created in the second and not in the first case since the same reference of handleChange method is being provided to the handler.

You might also want to look at <a href="https://stackoverflow.com/questions/47679673/how-does-event-handlers-with-arrow-functions-achieve-context-binding/47680408#47680408">how arrow function in render achieve context binding</a>

blocks|key|698084|text|在JavaScript中处理事件时，打开this上下文可能会非常混乱，您可以在这个优秀的写作中对它进行阅读更多处理。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|698085|回到您的问题，onChange={this.handleChange}并不保证handleChange()中的this上下文总是相同的组件实例，在许多情况下，this会引用发出onChange事件的FormControl实例。|698086|第二种方法使用箭头语法，它将确保this始终是处理事件的React组件实例。|698087|简而言之，在React组件类中，使用箭头语法处理事件是首选的，因为它保证了一致的this上下文。|698088|entityMap|0|LINK|mutability|MUTABLE|url|https://www.sitepoint.com/javascript-this-event-handlers/|1^0|K|4|15|5|0|1F|4|1|0|7|S|13|E|1J|4|27|4|2R|B|0|G|4|0|14|4|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]|$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]|T|$5|O|P|Q|E|$R|S]]]]

When handling an event in JavaScript, the <code>this</code> context out of the box can be very confusing, you can <a href="https://www.sitepoint.com/javascript-this-event-handlers/" rel="nofollow noreferrer">read more</a> about it in this <a href="https://www.sitepoint.com/javascript-this-event-handlers/" rel="nofollow noreferrer">excellent writeup</a>.

Back to your question, the first way <code>onChange={this.handleChange}</code> does not guarantee the <code>this</code> context in <code>handleChange()</code> would always be the same component instance, in many cases, <code>this</code> would refer to the <code>FormControl</code> instance that emits the onChange event.

The second way uses arrow syntax, it would guarantee <code>this</code> would always be the React component instance that handles the event.

In short, using arrow syntax for event handling is preferred in React component classes because it guarantees a consistent <code>this</code> context.

blocks|key|697928|text|我们可以在类构造函数中绑定事件处理程序：|type|blockquote|depth|inlineStyleRanges|entityRanges|data|697929|我们现在可以在事件句柄中访问这个|unstyled|697930|class+MyClass+extends+Component+{
++constructor(props)+{
++++super(props)
++++this.handleChange+=+this.handleChange.bind(this)
++}
++handleChange(){
+++//you+can+now+access+"this"+inside+handlechange
++}+

}|code-block|syntax|javascript|697931|看上去很好。当我们向类中添加更多的事件处理程序时，代码应该类似于以下内容：|697932|import+React,+{+Component+}+from+'react'
import+{+MyInput,+MyAnotherInput+}+from+'myInputs'

class+MyComponent+extends+Component+{
++constructor(props)+{
++++super(props)
++++this.handleChange+=+this.handleChange.bind(this)
++++this.handleClick+=+this.handleClick.bind(this)
++++this.handleKeyPress+=+this.handleKeyPress.bind(this)
++}

++handleChange(e)+{
++++e.preventDefault()
++}

++handleClick(e)+{
++++e.preventDefault()
++}

++handleKeyPress(e)+{
++++e.preventDefault()

++++if+(e.nativeEvent.keyCode+===+13)+{
++++++console.log('This+is+enter!')
++++}
++}

++render()+{
++++return+(
++++++<div>
++++++++<MyInput
++++++++++onChange={+this.handleChange+}
++++++++++onClick={+this.handleClick+}
++++++++++onKeyPress={+this.handleKeyPress+}
++++++++/>
++++++++<MyAnotherInput
++++++++++onChange={+this.handleChange+}
++++++++++onClick={+this.handleClick+}
++++++++++onKeyPress={+this.handleKeyPress+}
++++++++/>
++++++</div>++
++++)
++}
}|697933|这就是我们可以用es2015作为预置配置的Babel编译器所做的事情。|697934|具有箭头函数的事件处理程序|697935|正如您可能已经看到的，当我们创建事件处理程序方法时，我们总是需要将它添加到构造函数中来绑定它。很累人。老实说，只为绑定方法创建构造函数方法是没有意义的。应该有另一种解决办法，而且确实有。|697936|所有您需要的是安装阶段-1+Babel预置和使用箭头功能。如果你不知道，怎么做，转到Babel文档，这是非常好的。|697937|在我们的例子中，我们可以发布这样的命令，而不是将方法绑定到此：|697938|render()+{
+++return(<MyInput+onChange={+(e)+=>+this.handleOnChange(e)+}+/>)
}|697939|我们已经创建了新的匿名函数，它会自动绑定这个函数，这就是我们不需要使用.bind()方法的原因。类中仍然有相同的方法，新箭头函数作为回调属性中的包装器。|697940|--这仍然不是完美的解决方案，因为我们需要更新箭头函数包装器中的参数，并且每次触发呈现方法时都会创建新的实例。反应属性中的箭头函数也不是什么好主意。|offset|length|style|BOLD|697941|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|22|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1A|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|1B|8|@]|9|@]|A|$H|I]]|$1|J|3|K|5|D|7|1C|8|@]|9|@]|A|$]]|$1|L|3|M|5|G|7|1D|8|@]|9|@]|A|$H|I]]|$1|N|3|O|5|D|7|1E|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1F|8|@]|9|@]|A|$]]|$1|R|3|S|5|D|7|1G|8|@]|9|@]|A|$]]|$1|T|3|U|5|D|7|1H|8|@]|9|@]|A|$]]|$1|V|3|W|5|D|7|1I|8|@]|9|@]|A|$]]|$1|X|3|Y|5|G|7|1J|8|@]|9|@]|A|$H|I]]|$1|Z|3|10|5|6|7|1K|8|@]|9|@]|A|$]]|$1|11|3|12|5|D|7|1L|8|@$13|1M|14|1N|15|16]]|9|@]|A|$]]|$1|17|3|-4|5|D|7|1O|8|@]|9|@]|A|$]]]|18|$]]

<blockquote>
 We can bind our event handlers in class constructor:
</blockquote>

we can now access to this inside the event handle

<pre><code>class MyClass extends Component {
 constructor(props) {
 super(props)
 this.handleChange = this.handleChange.bind(this)
 }
 handleChange(){
 //you can now access "this" inside handlechange
 } 

}
</code></pre>

Looks fine. When we add more event handlers to our class, code should look similar to this:

<pre><code>import React, { Component } from 'react'
import { MyInput, MyAnotherInput } from 'myInputs'

class MyComponent extends Component {
 constructor(props) {
 super(props)
 this.handleChange = this.handleChange.bind(this)
 this.handleClick = this.handleClick.bind(this)
 this.handleKeyPress = this.handleKeyPress.bind(this)
 }

 handleChange(e) {
 e.preventDefault()
 }

 handleClick(e) {
 e.preventDefault()
 }

 handleKeyPress(e) {
 e.preventDefault()

 if (e.nativeEvent.keyCode === 13) {
 console.log('This is enter!')
 }
 }

 render() {
 return (
 &lt;div&gt;
 &lt;MyInput
 onChange={ this.handleChange }
 onClick={ this.handleClick }
 onKeyPress={ this.handleKeyPress }
 /&gt;
 &lt;MyAnotherInput
 onChange={ this.handleChange }
 onClick={ this.handleClick }
 onKeyPress={ this.handleKeyPress }
 /&gt;
 &lt;/div&gt; 
 )
 }
}
</code></pre>

This is, what we can do with Babel compiler with es2015 as preset configuration.

<blockquote>
 Event handlers with arrow functions
</blockquote>

As you have probably seen, when we create event handler method, we always need to add this to constructor, to bind this. Quite tiresome. To be honest, there is no sense to create constructor method only for binding your methods. There should be another solution, and there is.

All what you need is to install stage-1 Babel preset and use arrow functions. If you don’t know, how to do this, go to Babel documentation, it’s very good.

In our case instead of binding methods to this we can writ something like this:

<pre><code>render() {
 return(&lt;MyInput onChange={ (e) =&gt; this.handleOnChange(e) } /&gt;)
}
</code></pre>

<blockquote>
 We have created new anonymous function, which automatically bind this,
 that’s why we don’t need to use .bind() method. We have still the same
 methods in class, and new arrow functions as wrappers in callbacks
 properties.
</blockquote>

This is still not perfect solution, because we need to update parameters in arrow function wrappers and we create new instances each time when render method is triggered. Arrow functions in React properties are also not great idea.

blocks|key|1392208|text|在呈现中使用箭头函数可能会导致一些性能问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1392209|我建议您在类属性中使用箭头函数，但必须使用第2阶段的特性。|1392210|在这里，您会发现两个选项之间有一个很好的比较：|1392211|https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56|offset|length|1392212|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|2Q|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@$H|U|I|V|1|W]]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|G]]]]

Using arrow function in render may cause some performance issues.

I'd suggest you to use arrow function in class property, but you must use stage-2 features.

Here you'll find a nice comparison between the options:

<a href="https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56" rel="nofollow noreferrer">https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56</a>

blocks|key|120470|text|假设您的事件处理程序是这样在类中编写的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|120471|handleChange+=+(e)+=>+{
++this.setState({+[e.target.id]:+e.target.value+});
}|code-block|syntax|javascript|120472|让我们来看你提到的第一个例子。|120473|<FormControl+value={this.state.password}+onChange={this.handleChange}+/>|120474|在这里，对于每次更改，您都要传递handleChange函数的内存引用，并将事件对象传递给它。|120475|第二种方法。|120476|<FormControl+value={this.state.password}+onChange={(e)+=>+this.handleChange(e)}+/>|120477|在这里，您将创建一个新的匿名函数，该函数每次发生事件更改时都将事件对象作为参数。这大大增加了垃圾收集，如果您有大型列表items.Adding，则箭头函数在本例中是多余的，因为上下文已经被绑定，这是因为您最初编写handleChange方法的方式。作为perf提示，如果在类中使用箭头函数，则对事件处理程序使用选项1。|offset|length|style|CODE|120478|entityMap^0|0|0|0|0|0|0|0|2Y|C|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|15|8|@$S|16|T|17|U|V]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

Assuming your event handler is written like so in your class

<pre><code>handleChange = (e) =&gt; {
 this.setState({ [e.target.id]: e.target.value });
}
</code></pre>

Let us go to the first example that you have mentioned.

<pre><code>&lt;FormControl value={this.state.password} onChange={this.handleChange} /&gt;
</code></pre>

Over here, for every change you are passing the memory reference of the handleChange function, and to it the event object is being passed.

Going to the second method.

<pre><code>&lt;FormControl value={this.state.password} onChange={(e) =&gt; this.handleChange(e)} /&gt;
</code></pre>

Here you are creating a new anonymous function, which takes the event object as a parameter, every time an event change occurs. This drastically increases garbage collection if you have large list items.Adding an arrow function in this case is redundant as the context is already bound due to the way you wrote you <code>handleChange</code> method initially. As a perf tip, if you are using arrow functions in your classes, use option 1 for event handlers.

Say I have a function:
<pre><code>handleChange = (e) =&gt; {
 this.setState({ [e.target.id]: e.target.value });
}
</code></pre>
What is the difference between the following:
1.
<pre><code>&lt;FormControl value={this.state.password} onChange={this.handleChange} /&gt;
</code></pre>
<ol start="2">
<li></li>
</ol>
<pre><code>&lt;FormControl value={this.state.password} onChange={(e) =&gt; this.handleChange(e)} /&gt;
</code></pre>

Passing an arrow function vs passing the function

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

假设我有一个功能：handleChange = (e) => { this.setState({ [e.target.id]: e.target.value });}以下几点之间有什么区别：1.<FormControl value={this.state.password} onChange={this.handle...

问传递箭头函数与传递函数
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问传递箭头函数与传递函数EN