与 Fat Arrow (=>) 函数混淆

Question

嗨，我正在学习 NextJs 并发现了这个问题

这个模块有效

const GlobalStyles = () => (
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
);
export default GlobalStyles;

这不是

const GlobalStyles = () => {
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
};
export default GlobalStyles;

我真的很菜鸟谁能解释一下？

Answer 1

第一个 return 是隐式的 jsx 元素（无需指定 return）。

第二个缺少 return 语句。

说明：在 JavaScript 中，当您使用箭头函数时，如果您唯一想做的是 return 来自的值，则可以省略大括号 ({})函数，但是如果你确实使用花括号，你需要实际写 return 到 return 任何你想要的 return.

Answer 2

使用方括号 {} 时，您声明的箭头函数需要 return 语句。

通过括号定义箭头函数，你只允许有一个语句（你的定义），默认返回。

如果您像这样添加 return，您的第二个示例将起作用：

const GlobalStyles = () => {
  return (<>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>);
};
export default GlobalStyles;

Answer 3

这个问题的答案很简单。

const GlobalStyles = () => (
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
);

这相当于

const GlobalStyles = () => {
  return (
    <>
      <Global
        styles={css`
          body {
            color: #000000;
          }
        `}
      />
    </>
  );
}

您的第二个代码块没有 return 任何内容，因此不呈现任何内容是正确的行为。

Answer 4

真是个好问题！每个人都不关心它为什么要用？

顾名思义，IIFE 是定义后立即执行的函数——无需显式调用它们。

通常，这是您定义和执行（稍后）函数的方式：

function myFunction() {

// ...

}

myFunction();

但是如果你想在函数定义后立即执行它，你必须将整个声明包裹在括号中（将其转换为表达式）并通过添加两个括号来执行它（将任何参数传递给函数可能需要）。

要么这样：

( function myFunction(/* arguments */) {
    // ...
}(/* arguments */) );

在 TypeScript 中，您使用花括号包裹 IIFE，将所有您想要的逻辑放入其中（if/else、开关、三元运算符等），以及 return 任何您想要的渲染。例如，下面是使用 IIFE 呈现 save/edit 按钮的逻辑：

( (/* arguments */) => {
    // ...
} ) (/* arguments */);

希望我的回答能帮助您理解=>运算符。

与 Fat Arrow (=>) 函数混淆

Confused with Fat Arrow (=>) function

javascript

function

reactjs

arrow-functions

next.js