与Fat Arrow=>函数混淆

问题描述

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

此模块有效

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

不是

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

真的是菜鸟，谁能解释？

解决方法

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

第二个语句缺少return语句。

说明：在JavaScript中，当您只想从函数返回值时，如果使用箭头函数，则可以省略花括号（{}），但是如果您使用花括号，您实际上需要写return才能返回要返回的任何内容。

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

通过在括号中定义箭头功能，只允许您使用一条语句（您的定义），默认情况下会返回该语句。

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

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

答案很简单。

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

这等效于

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

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

这是一个很好的问题！每个人都不关心为什么要使用它？

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

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

function myFunction() {

// ...

}

myFunction();

但是，如果要在定义函数后立即执行该函数，则必须将整个声明包装在括号中（以将其转换为表达式），并通过添加两个以上的括号（传递该函数可能采用的任何参数）来执行）。

通过这种方式：

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

在TypeScript中，使用花括号将IIFE换行，将所需的所有逻辑放入其中（if / else，switch，三元运算符等），然后返回要渲染的内容。例如，以下是使用IIFE呈现保存/编辑按钮的逻辑的样子：

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

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

arrow-functions function function javascript reactjs reactjs