Question

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

让我们举个例子：

fetch(ip + '/stats', {
    method: "GET",
})
.then(function (response) {
    return response.json();
})
.then(data => {
    this.setState({ 
        variable: {
             datasets: [{
                 data: [
                        data[0],
                        data[1],
                        data[2],
                        data[3],
                        data[4],
                        data[5],
                    ],
                }]
            }
        })
    }
})

这是一个功能组件，但是可以这样重写：

fetch(ip + '/stats', {
    method: "GET",
})
.then(function (response) {
    return response.json();
})
.then(data => {
    this.setState({ 
        variable: {
             datasets: [{
                 data: [
                    for (let i = 0; i < data.length; i++) {
                        data[i],
                    }
                    ],
                }]
            }
        })
    }
})

实际区别是什么？是不是同一件事？什么时候使用（）和何时{}？

Answer 1

箭头功能可以具有以下两种形式之一：

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

您提到的(args) => (...)形式实际上只是带有额外括号的形式＃2（例如，如果返回对象文字，则可能是必需的，因为否则它将与形式＃1模棱两可，并且它们是标准形式返回<Thing>...</Thing>之类的JSX表达式。

如果您不仅想return做某事，还可以使用表格＃1。否则，表格2就足够了。

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

Answer 2

使用()时，您告诉程序()中的所有内容，请返回它。因此，当您使用没有代码块{}的箭头函数时，这意味着它将返回箭头=>右侧的任何内容，因此，如果您说(x, y) => x + y则意味着该函数将返回{{ 1}}，但在您的情况下，箭头后面的x + y只是对React 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之前进行计算，则底线使用第一个。否则请使用第二个

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

3 个答案: