const funcName = (args) => ; 有啥区别？和 const funcName = (args) => ( );? [复制]

Posted 2023-02-21

【中文标题】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 而没有代码块则隐式返回 => 之后的任何内容

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