This is taken from the Airbnb react style guide
// bad
class Listing extends React.Component {
render() {
return <div>{this.props.hello}</div>;
}
}
// bad (relying on function name inference is discouraged)
const Listing = ({ hello }) => (
<div>{hello}</div>
);
// good
function Listing({ hello }) {
return <div>{hello}</div>;
}
之所以不推薦是因為Inferred function names
先看看MDN的解釋Function.name
Inferred function names
Variables and methods can infer the name of an anonymous function from its syntactic position (new in ECMAScript 2015).
即在ES6中彬向，瀏覽器會去推斷匿名函數的name屬性
而且在babel中，在對arrow function轉譯時也會加上函數名
image.png
轉譯稱ES5以后
image.png
簡單來說，就是你的代碼和你預期的行為是一樣的是比較好的實踐府树，盡量避免瀏覽器和預處理器的隱式的行為
reference
Why does the Airbnb style guide say that relying on function name inference is discouraged?
