React钩子常量组件与功能组件

tag5nh1u 于 2022-09-21 发布在 React

关注(0)|答案(2)|浏览(162)

我理解功能组件和类组件之间的区别，但是常量组件和功能组件有什么不同呢？

E.g

const Home = () => {
    return (
        <div>Home</div>
    )
}

至

function Home() {
     return (
        <div>Home</div>
    )
}

它们都可以使用钩子，那么主要的区别是什么？

2条答案

没有有效的区别。第一步是使用Arrow function expressions语法创建函数并将其存储为常量，第二步是创建普通函数。

这两个函数都将执行完全相同的任务，返回用于呈现的组件JSX代码。

此外，也没有这样的术语和概念*“常量组件”；有“功能组件”和“类组件”*。

在声明功能组件时，我看不出使用const和简单地使用Function有太大区别。但是，正如我注意到的，有一些细微的区别。

function Component1() {
  return(
    ..
  )
}

const Component = () => {
  return(
    ..
  )
}

与常量相比，一个优点是您可以原地导出默认函数。您也可以省略名称，直接导出函数表达式，但这似乎是不好的做法。使用Function关键字实际上比使用const关键字要短。如果您的函数体只是返回JSX，则只能保存一些字符。
通过依赖于Helper函数的提升，如果您希望将组件保留在底部并在声明之前使用它们，我们可以使用函数语法编写它们，并将它们提升到文件的顶部。和康斯特在一起我们不能这么做。