我读了一堆React代码,我看到了这样的东西,我不理解:
handleChange = field => e => {
e.preventDefault();
/// Do something here
}
我读了一堆React代码,我看到了这样的东西,我不理解:
handleChange = field => e => {
e.preventDefault();
/// Do something here
}
当前回答
可以这样想,每次你看到一个箭头,你就用函数替换它。函数参数在箭头之前定义。 在你的例子中:
field => // function(field){}
e => { e.preventDefault(); } // function(e){e.preventDefault();}
然后一起:
function (field) {
return function (e) {
e.preventDefault();
};
}
从文档中可以看出:
// Basic syntax:
(param1, param2, paramN) => { statements }
(param1, param2, paramN) => expression
// equivalent to: => { return expression; }
// Parentheses are optional when there's only one argument:
singleParam => { statements }
singleParam => expression
其他回答
理解箭头函数的可用语法将使你理解它们在“链接”时引入的行为,就像你提供的例子一样。
当一个箭头函数不带大括号(带或不带多个形参)时,将隐式返回构成函数体的表达式。在您的示例中,该表达式是另一个箭头函数。
No arrow funcs Implicitly return `e=>{…}` Explicitly return `e=>{…}`
---------------------------------------------------------------------------------
function (field) { | field => e => { | field => {
return function (e) { | | return e => {
e.preventDefault() | e.preventDefault() | e.preventDefault()
} | | }
} | } | }
使用箭头语法编写匿名函数的另一个优点是,它们在词法上绑定到定义它们的作用域。来自MDN上的“箭头函数”:
与函数表达式相比,箭头函数表达式具有更短的语法,并且在词法上绑定this值。箭头函数总是匿名的。
考虑到它来自一个reactjs应用程序,这在您的示例中尤其相关。正如@naomik所指出的,在React中,你经常使用这个来访问组件的成员函数。例如:
Unbound Explicitly bound Implicitly bound
------------------------------------------------------------------------------
function (field) { | function (field) { | field => e => {
return function (e) { | return function (e) { |
this.setState(...) | this.setState(...) | this.setState(...)
} | }.bind(this) |
} | }.bind(this) | }
可以这样想,每次你看到一个箭头,你就用函数替换它。函数参数在箭头之前定义。 在你的例子中:
field => // function(field){}
e => { e.preventDefault(); } // function(e){e.preventDefault();}
然后一起:
function (field) {
return function (e) {
e.preventDefault();
};
}
从文档中可以看出:
// Basic syntax:
(param1, param2, paramN) => { statements }
(param1, param2, paramN) => expression
// equivalent to: => { return expression; }
// Parentheses are optional when there's only one argument:
singleParam => { statements }
singleParam => expression
一般提示:如果你对任何新的JavaScript语法以及它的编译方式感到困惑,你可以查看Babel。例如,在Babel中复制您的代码并选择ES 2015预设将会给出如下输出
handleChange = function handleChange(field) {
return function (e) {
e.preventDefault();
// Do something here
};
};
你问题中的例子是一个curry函数,它使用箭头函数,并对第一个参数有一个隐式返回。
箭头函数在词法上绑定this,即它们没有自己的this参数,而是从封闭范围中获取this值
与上述代码等价的代码是
const handleChange = (field) {
return function(e) {
e.preventDefault();
/// Do something here
}.bind(this);
}.bind(this);
关于您的示例还有一点需要注意,即将handleChange定义为const或函数。可能你正在使用它作为一个类方法的一部分,它使用一个类字段语法
因此,与其直接绑定外部函数,不如在类构造函数中绑定它
class Something{
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(field) {
return function(e) {
e.preventDefault();
// do something
}
}
}
该示例中需要注意的另一件事是隐式和显式返回之间的区别。
const abc = (field) => field * 2;
上面是一个隐式返回的例子。它以value字段作为参数,并返回显式指定要返回函数的结果字段*2
对于显式返回,您将显式地告诉方法返回值
const abc = () => { return field*2; }
关于箭头函数需要注意的另一件事是,它们没有自己的参数,而是从父函数的作用域继承了参数。
例如,如果你定义一个箭头函数
const handleChange = () => {
console.log(arguments) // would give an error on running since arguments in undefined
}
作为可选的箭头函数,函数提供了您可以使用的其他参数
const handleChange = (...args) => {
console.log(args);
}
这可能不是完全相关的,但由于提到的react用例的问题(我一直碰到这个SO线程):这里没有明确提到双箭头函数的一个重要方面。 只有“第一个”箭头(函数)被命名(因此可以被运行时“区分”),任何后面的箭头都是匿名的,从React的角度来看,在每次渲染时都算作一个“新”对象。
因此,双箭头函数将导致任何PureComponent一直重新渲染。
例子
你有一个带有更改处理程序的父组件:
handleChange = task => event => { ... operations which uses both task and event... };
并且像这样渲染:
{ tasks.map(task => <MyTask handleChange={this.handleChange(task)}/> }
然后在输入或单击时使用handleChange。这些都很好用,看起来很不错。但是这意味着任何会导致父对象重新渲染的变化(比如一个完全不相关的状态变化)也会重新渲染你的所有MyTask,即使它们是PureComponents。
这可以通过多种方式缓解,例如传递'outmost'箭头和你将提供给它的对象,或者编写一个自定义shouldUpdate函数,或者回到基础,例如编写命名函数(并手动绑定This…)