React style guide

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?