Question

为什么mapStateToProps在道具对象周围有这些圆()括号？这是IIFE还是类似的东西？

const mapStateToProps = state => ({
  auth: state.auth
});

Answer 1

在箭头功能中，您可以通过不使用{}括号来返回一些值

const mapStateToProps = state => state;

这意味着mapStateToProps将返回state。

如果你想从该函数返回一个对象，那么你需要将该对象包装在()括号中。这样它就知道它正在返回一个对象，而不是创建一个函数定义。

const mapStateToProps = state => ({
  auth: state.auth
});

因此，在上面的代码中，mapStateToProps将返回一个对象（即{ auth: ..}）

查看更多信息Returning object literals

Answer 2

您的常规函数表达式或函数声明具有块语句部分作为函数体：

为了更好地理解这个主题，我们先来看看我们的定义：

Statements：

JavaScript应用程序由具有适当语法的语句组成。单个语句可能跨越多行。如果每个语句由分号分隔，则可能在一行上发生多个语句。这不是关键字，而是一组关键字。

示例：

x && y;
x + y;
x,y;
while(something) {}
if (whatever) {}

Block statement

块语句（或其他语言的复合语句）用于对零个或多个语句进行分组。该块由一对花括号分隔，并且可以选择标记为

示例：

const y = 1;

{
   y();
   const y = 2;
   if (x) {
     console.log(x);
   }
}

有些陈述可以是labelled：

带标签的语句可以与break或continue语句一起使用。它为带有标识符的语句添加前缀，您可以参考该标识符。

示例：

var str = "";

loop1:
for (var i = 0; i < 5; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

console.log(str);
// expected output: "0234"

但也可以

x: 1 // just a global level labelled statement

x: { // labelled statement with a block statement body
    y: { // labelled statement with a block statement body
       z: 1 // labelled statement with an expression statement
            // containing numeric literal expression
       ...
    }
}

箭头函数允许编写表达式语句而不是块语句作为其主体。这是它与常规功能不同的原因之一，以及为什么它如此受欢迎。

现在，为了示例的目的，让我们尝试：

const mapStateToProps = state => {
  auth: state.auth
};

当您在此处使用{}时，您可能并不意味着阻止声明，您可能会使用属性键和值来表示object literal expression {a: 1, b: 2}。

但是js编译器看到一个语句，恰好是一个块语句，因此将语句中的所有内容解析为语句，这就是为什么您的auth: state.auth被解析为标记的语句。

现在编译器看到了这个：

const mapStateToProps = state => ({
  auth: state.auth
});

或

const mapStateToProps = state => state;

或

const mapStateToProps = state => 1;

或除了命名的块语句之外的任何内容，它都试图将以下内容视为表达式语句。

并且箭头函数返回表达式返回的任何内容，例如在

中

x = () => a = 1

a = 1部分被视为一个赋值表达式，它自己返回1。

截至grouping operator ()，它会对待它操作数作为表达式并按照概述here

返回其评估结果

ParenthesizedExpression：（表达式）返回评估Expression的结果。这可能是参考类型。

因此我们的({ auth: state.auth })被编译为一个对象文字表达式，在评估之后将底层对象返回给任何调用mapStateToProps的人。

希望这能澄清一点。

反应redux mapStateToProps圆括号

2 个答案: