const funcName = (args) => { }; 有什么区别？和 const funcName = (args) => ( );? [复制]答案

【问题标题】：What is the difference between const funcName = (args) => { }; and const funcName = (args) => ( );? [duplicate]const funcName = (args) => { }; 有什么区别？和 const funcName = (args) => ( );? [复制]
【发布时间】：2020-11-08 08:16:23
【问题描述】：

我是 React 新手，现在我正在学习 Pluralsight 课程。

我们来看这个例子：

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>
);

实际的区别是什么？不是一样的吗？何时使用 () 以及何时使用 {}？

【问题讨论】：

{} 创建一个 代码块 并需要显式的 return 而没有代码块则隐式返回 => 之后的任何内容

标签： javascript reactjs function functional-programming react-component

【解决方案1】：

当您使用() 时，您会告诉您的程序() 中的任何内容请返回它。因此，当您使用没有代码块{} 的箭头函数时，这意味着它将返回箭头右侧的任何内容=> 因此，如果您说(x, y) => x + y 意味着此函数将返回x + y，但在您的情况下() 后面的箭头只是 React JSX 的分组，所以

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

只是意味着退货。您的问题“有什么区别”的答案，在第一种情况下，您有一个代码块{}，您可以在其中编写一些逻辑，然后在第二个版本中返回 JSX 组件，它将立即返回组件而没有任何逻辑。

【讨论】：

【解决方案2】：

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

(args) => { /* statements */ }
(args) => returnValue 作为(args) => { return returnValue } 的简写

您提到的(args) => (...) 表单实际上只是带有额外括号的表单#2（例如，如果返回一个对象字面量，这可能是必要的，因为否则它会与表单#1 模棱两可，它们是返回的标准一个 JSX 表达式，例如 <Thing>...</Thing>)。

如果您想做的不仅仅是returning 某事，您将使用表格#1。否则表格 #2 就足够了。

（注意：如果只有一个参数，左括号是可选的 - args => ... 与 (args) => ... 相同）

【讨论】：

【解决方案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 之前进行计算，请使用第一个。否则使用第二个

【讨论】：