const funcName = (args) => {}和const funcName = (args) => ( );？

Question

我是新来的反应，现在我正在上一门关于普卢拉明的课程。

让我们以这个例子为例：

const Card = (props) => {
      
      var profile = props;
      return (<div className="github-profile">
          <img src={profile.avatar_url} />
        <div className="info">
          <div className="name">{profile.name}</div>
          <div className="company">{profile.company}</div>
        </div>
        </div>);
};

这是一个函数组件，但可以重写如下：

const Card = (props) => (
        <div className="github-profile">
          <img src={props.avatar_url} />
        <div className="info">
          <div className="name">{props.name}</div>
          <div className="company">{props.company}</div>
        </div>
        </div>
);

实际的区别是什么？不是一回事吗？当你使用()和{}时？

Answer 1

箭头函数可以有两种形式之一：

1. (args) => { /* statements */ }
2. (args) => returnValue是(args) => { return returnValue }

的简写

您提到的(args) => (...)表单实际上只是带有额外括号的表单#2 (例如，如果返回一个对象文本，这可能是必要的，因为否则它将与表单#1不明确，并且它们是返回像<Thing>...</Thing>一样的JSX表达式的标准格式)。

如果你想做的不仅仅是做一些事情，你会使用表格#1，否则表格#2就足够了。

(注:如果只有一个参数，则左括号是可选的- args => ...与(args) => ...__相同)

Answer 2

当您使用()时，您告诉您的程序，无论()中有什么内容，请将其返回。因此，当您使用箭头函数而没有代码块{}时，它意味着它将返回箭头=>右边的任何东西，所以如果您说(x, y) => x + y意味着该函数将返回x + y，但在您的示例中，箭头后面的()只是将反应JSX分组，所以

const Card = (props) => (
  <div>
    Hello
  </div>
)

意思是把它还回去。对于您的问题“有什么不同”的答案，在第一种情况下，您有一个代码块{}，您可以在第二个版本中返回JSX组件之前编写一些逻辑--它将立即返回组件，而不需要任何逻辑。

Answer 3

在第一种情况下，您可以进行简单的javascript计算。

  const Card = (props) => {

  int x = 2+3; // or some foreach loop

  var profile = props;
  return (<div className="github-profile">
      <img src={profile.avatar_url} />
    <div className="info">
      <div className="name">{profile.name}</div>
      <div className="company">{profile.company}</div>
    </div>
    </div>); };

但在第二种情况下，您不能进行普通的javascript计算。它只返回JSX。因此，如果您想在返回JSX之前进行计算，请使用第一个。否则使用第二个