javascript - React redux mapStateToProps 圆括号

Question

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

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

Answer 1

您的正则函数表达式或函数声明有一个 block 语句部分作为函数体:

为了更好地理解这个主题，让我们首先检查我们的定义:

Statements :

JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.

示例:

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

Block statement

A block statement (or compound statement in other languages) is used to group zero or more statements. The block is delimited by a pair of curly brackets and may optionally be labelled

示例:

const y = 1;

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

某些语句可以是labelled :

The labeled statement can be used with break or continue statements. It is prefixing a statement with an identifier which you can refer to.

示例:

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
       ...
    }
}

箭头函数允许编写表达式语句而不是 block 语句作为其主体。这就是它与常规函数不同以及如此受青睐的原因之一。

现在为了示例的目的，让我们尝试一下:

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

当您在这里使用 {} 时，您可能不是指 block 语句，您可能指的是 object literal expression {a: 1, b: 2} 包含属性键和值。

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

现在当编译器看到这个时:

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

或

const mapStateToProps = state => state;

或

const mapStateToProps = state => 1;

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

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

x = () => a = 1

a = 1 部分被视为赋值表达式，它本身返回 1。

截至grouping operator ()，它对待它的操作数作为表达式并返回其计算结果，如概述 here

ParenthesizedExpression:(Expression) Return the result of evaluating Expression. This may be of type Reference.

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

希望这能澄清一点。