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

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

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

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

如果你想做的不仅仅是return，你可以使用表格#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之前进行计算，请使用第一条底线。否则使用第二个