Javascript react中函数类型的说明

createreact组件（而不是我们需要绑定的组件内部的函数）的函数声明和箭头函数之间有什么区别

旧版本的reactjs运行create react app时，会将应用程序组件创建为箭头函数

export const App=（props）=>{}

最新版本创建为函数声明

---

函数App（）{}

我想说，这确实是一个有点固执己见的选择。我（个人）认为纯功能组件使用箭头函数是非常糟糕的做法，至少有几个原因。以下是：

语法滥用。当我们定义函数组件时，我们不需要将其上下文预先绑定到特定的范围。无论如何，在模块名称空间中，上下文（this）都将是未定义的。箭头函数的使用是出于纯粹的美学原因，如简洁性。但箭头作为语言特征的功能首先有着非常特定的存在目的，这不是冷静和简洁

堆栈跟踪错误。arrow函数中抛出的异常将不太具有描述性，因为arrow函数根据定义是匿名的。这可能不是什么大问题，因为React项目很可能会配置适当的源映射支持，但如果使用命名函数，堆栈跟踪将更加清晰。如注释中所述，这实际上不是功能组件的问题，因为名称基本上就是变量的名称

Less convenient logging. Consider this very typical pure function component style:

const Header = ({ name, branding }) => (
  <header>
    ...
  </header>
)

不太方便的日志记录。考虑这个非常典型的纯函数组件样式：
常量头=（{name，branding}）=>(
...
)

在上面的函数中，不可能插入QuickDebugger语句或console.log。您将不得不临时将其转换为类似的内容

const Header = function ({ name, branding }) { 
  console.log(name)
  return (
    <header>
      ...
    </header>
  )
}

const Header=函数（{name，branding}）{
console.log（名称）
返回(
...
)
}

这可能是相当恼人的，尤其是对于更大的纯组件

尽管如此，对于许多团队来说，这是一个非常流行的选择，默认情况下也是ESLint的首选，因此，如果您没有看到它的问题，那么它可能是好的。

可能重复的