[英]when to use function() , function or () => function(callback)
I have been searching for a while for a good explanation so its all clear to me. 我一直在寻找一个很好的解释,所以这一切都清楚了。 Example:
例:
<Char click={()=>this.onDeleteHandler(index)}/>
vs VS
<Char click={this.onDeleteHandler()}/>
vs VS
<Person changed={(event) => this.nameChangedhandler(event, person.id)} />
and 和
<Char click={this.onDeleteHandler}/>
regarding the third code , here is the property called: 关于第三个代码,这里是名为:
nameChangedhandler = (event, id) => {
const personIndex = this.state.persons.findIndex(p => {
return p.id === id;
});
// copying the person with the right index
const person = {
...this.state.persons[personIndex]
};
// Assigning new name to this person
person.name = event.target.value;
// copying array of persons, then manipulating the correct object of person by using the index
const persons = [...this.state.persons];
persons[personIndex]= person;
this.setState({
persons: persons
});
} }
some aspects are clear to me, but definitely not 100%! 有些方面对我来说很清楚,但绝对不是100%! So if you can provide me with an explanation, link or similar that would be great!
所以,如果你能给我一个解释,链接或类似的东西,那将是伟大的!
thanks! 谢谢!
<Char click={()=>this.onDeleteHandler(index)}/>
It passes anonymous function as a callback which - when clicked - triggers onDeleteHandler
with extra index
parameter (which has to be defined in the scope before). 它将匿名函数作为回调传递 - 当单击时 - 触发带有额外
index
参数的onDeleteHandler
(必须在之前的范围中定义)。
<Char click={this.onDeleteHandler()}/>
It passes result of onDeleteHandler()
as a callback - probably a bad idea - onDeleteHandler
function has to return another function that will be invoked on click. 它传递
onDeleteHandler()
结果作为回调 - 可能是一个坏主意 - onDeleteHandler
函数必须返回另一个将在点击时调用的函数。
<Person click={changed={(event) => this.nameChangedhandler(event, person.id)} />
Looks invalid - will result with syntax error. 看起来无效 - 会导致语法错误。
<Char click={this.onDeleteHandler}/>
Similar to the first example but doesn't take custom parameters. 与第一个示例类似,但不采用自定义参数。 Default click event will be passed as a first argument for
onDeleteHandler
默认点击事件将作为
onDeleteHandler
的第一个参数onDeleteHandler
Generally you would make use of inline arrow functions when you need to bind he handler to the context or to provide custom parameters 通常,当您需要将处理程序绑定到上下文或提供自定义参数时,您将使用内联箭头函数
In 在
<Char click={()=>this.onDeleteHandler(index)}/>
onDeleteHandler
is bound to the context where Char
is rendered and is passed a custom parameter index
. onDeleteHandler
绑定到呈现Char
的上下文,并传递自定义参数index
。 Since a new function is returned to click
, it can be executed from within Char
like this.props.click()
由于返回一个新函数进行
click
,它可以在Char
执行,如this.props.click()
<Char click={this.onDeleteHandler()}/>
Here the onDeleteHandler
is evaluated and the value is returned to the click
prop 这里评估
onDeleteHandler
并将值返回给click
prop
<Person click={changed={(event) => this.nameChangedhandler(event, person.id)} />
Here the syntax is invalid, it should probably be 这里语法无效,应该是
<Person changed={(event) => this.nameChangedhandler(event, person.id)} />
In which case, it takes the default parameter and pass it along with the custom parameter to nameChangedHandler
and it also performs binding 在这种情况下,它采用默认参数并将其与自定义参数一起传递给
nameChangedHandler
,它还执行绑定
<Char click={this.onDeleteHandler}/>
just assigns the reference of onDeleteHandler
to click
and whenever you invoke click
, onDeleteHandler
will be called with the parameters that you pass while invoking click and the context within onDeleteHandler
will refer to the context from where it is invoked unless you bind onDeleteHandler
using arrow function or in constructor 刚刚分配的参考
onDeleteHandler
到click
,只要你调用click
, onDeleteHandler
将与您传递在调用点击中的上下文中的参数来调用onDeleteHandler
将指的是从它被调用文意,除非你绑定onDeleteHandler
使用箭头功能或在构造函数中
The whole question seems to boil down to what the difference between func
and func()
and () => func()
is. 整个问题似乎归结为
func
和func()
和() => func()
之间的区别。 It has nothing to do specifically with React. 它与React无关。
If I have a function 如果我有一个功能
function func() {
console.log(42);
}
Then I can reference the function object itself via func
. 然后我可以通过
func
引用函数对象本身。 This is useful if I need to pass the function to another function , eg setTimeout
: 如果我需要将函数传递给另一个函数 ,例如
setTimeout
,这很有用:
setTimeout(func, 1000); // calls func after 1000ms
setTimeout
expects a function that it can call after the provided timeout. setTimeout
需要一个可以在提供的超时后调用的函数。
Similarly in React, click
, change
etc are all props that expect to be passed a function that is called when the event happens. 类似地,在React中,
click
, change
等都是期望传递事件发生时调用的函数的道具。
func()
on the other hand calls the function . 另一方面,
func()
调用该函数 。 This needs to be done if you actually need to call function right then and there. 如果您确实需要在那时调用函数,则需要执行此操作。 This implies that if I do
这意味着,如果我这样做
setTimeout(func(), 1000);
then I would call func
first and pass its return value to setTimeout
(ie I call func
now, setTimeout
doesn't call it later). 然后我先调用
func
并将其返回值传递给setTimeout
(即我现在调用func
, setTimeout
以后不调用它)。 So this is usually incorrect unless func
returns a function itself and its really the return value I want to pass to the other function. 所以这通常是不正确的, 除非
func
返回一个函数本身,它实际上是我想传递给另一个函数的返回值。
() => func()
is just a new function that only calls func
. () => func()
只是一个只调用func
的新函数。 For all intends and purposes it is equivalent to func
: 对于所有的目的和目的,它等同于
func
:
function func() { console.log(42); } const anotherFunc = () => func(); func(); anotherFunc();
And of course if func
expects an argument then I have to pass it along when wrapping it in another function, which is what x => func(x)
does. 当然,如果
func
需要一个参数,那么我必须在将它包装到另一个函数时传递它,这就是x => func(x)
所做的。
The other part is how functions assigned to object properties and this
work. 另一部分是如何将函数分配给对象属性和
this
工作。 In short, what this
refers to inside a (non-arrow) function depends on how the function is called . 简而言之,
this
指的是(非箭头)函数内部取决于函数的调用方式 。 Doing 干
this.foo();
// or
var bar = this.foo;
bar();
produces two different results because this.foo()
and bar()
are two different ways to call the function. 产生两个不同的结果,因为
this.foo()
和bar()
是调用函数的两种不同方式。 For more info see How to access the correct `this` inside a callback? 有关更多信息,请参阅如何在回调中访问正确的`this`?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.