为什么Airbnb风格指南说依靠功能名称推理是不鼓励的？ [英] Why does the Airbnb style guide say that relying on function name inference is discouraged?

问题描述

// 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>;
}

这是从Airbnb反应样式指南中获取的。有人可以解释为什么依靠功能名称推理是不鼓励的？这只是一个风格的关注点吗？

This is taken from the Airbnb react style guide. Can someone please explain why "relying on function name inference is discouraged"? Is it just a style concern?

推荐答案

我认为这也可能与您可能遇到的意外行为有关，从隐含地提供词法名称你可能期望是一个匿名的功能。

I think this could also have something to do with the unexpected behaviour that you might run into from implicitly giving a lexical name to what you may expect to be an anonymous function.

例如有人理解箭头功能：

Say for example someone understood the arrow function:

(x) => x+2;

要使常规功能相当：

function(x) {
  return x+2;
}

很容易期待这段代码：

let foo = (x) => x+2;

然后等于：

let foo = function(x) {
  return x+2;
}

功能保持匿名，无法引用自己做的事情递归。

Where the function remains anonymous and would be incapable of referencing itself to do things like recursion.

所以如果那么，在我们幸福的无知中，我们有这样的事情发生：

So if then, in our blissful ignorance, we had something like this happening:

let foo = (x) => (x<2) ? foo(2) : "foo(1)? I should be a reference error";
console.log(foo(1));

它将成功运行，因为该功能显然不是匿名的：

It would successfully run because that function obviously wasn't anonymous:

let foo = function foo(x) {
  return (x<2) ? foo(2) : "foo(1)? I should be a reference error";
}  

这可能会因为Babel隐含添加的其他情况而加剧匿名函数的名称（我认为实际上是一个支持隐式函数名称的副作用，尽管我可能是错误的），它们正确地处理任何边缘情况并抛出引用错误，在那里你会期待

This could potentially be exacerbated by the fact that in other situations where Babel implicitly adds a name to anonymous functions, (which I think is actually a bit of a side-effect of supporting implicit function names in the first place, though I could be wrong on that), they correctly handle any edge cases and throw reference errors where you would expect.

例如：

let foo = {
  bar: function() {}
} 

// Will surprisingly transpile to..

var foo = {
  bar: function bar() {}
}; 


// But doing something like:

var foo = {
  bar: function(x) {
    return (x<2) ? bar(2) : 'Whats happening!?';
  }
}

console.log(foo.bar(1));

// Will correctly cause a ReferenceError: bar is not defined

您可以在此快速演示上查看查看编译，以了解Babel如何实际转化为维护匿名函数的行为

You can check 'view compiled' on this quick DEMO to see how Babel is actually transpiling that to maintain the behaviour of an anonymous function.

简而言之，明确表示您正在做的事情通常是一个好主意，因为您知道预期的内容你的代码劝阻使用隐式函数命名可能是一种支持这一点的风格选择，同时还要简洁直观。

In short, being explicit with what you are doing is typically a good idea because you know exactly what to expect from your code. Discouraging the use of implicit function naming is likely a stylistic choice in support of this while also remaining concise and straightforward.

可能提升。但嘿，有趣的一边旅行。

And probably hoisting. But hey, fun side trip.

这篇关于为什么Airbnb风格指南说依靠功能名称推理是不鼓励的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！