const funcName = (args) => { }; 和有什么区别？和 const funcName = (args) => ( );?

Question

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

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

Answer 1

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

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

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

Answer 2

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

(args) => { /* statements */ }
(args) => returnValue 作为 shorthand 对于 (args) => { return returnValue }

您提到的 (args) => (...) 形式实际上只是带有额外括号的形式 #2（例如，如果返回对象文字，这可能是必要的，否则它与形式 #1 会产生歧义，并且它们是返回 JSX 表达式的标准，例如 <Thing>...</Thing>).

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

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

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 计算。它只是 returns JSX。所以如果你想在返回 JSX 之前进行计算，底线是使用第一个。否则使用第二个

const funcName = (args) => { }; 和有什么区别？和 const funcName = (args) => ( );?

What is the difference between const funcName = (args) => { }; and const funcName = (args) => ( );?

javascript

functional-programming

function

reactjs

react-component