export default / const / class extends有什么区别？

Question

盖茨比在他们的网站上有一个非常好的教程。一切正常，但我有一个问题，以了解启动器模板的差异。

starte模板中不同反应组件使用的区别是什么？为什么他们使用export default...作为hello world示例，const IndesPage = () 0> (作为默认启动器，class BlogIndes extends React.Componenent作为博客示例。

盖茨比起动问候世界

export default () => <div>Hello world!</div>

盖茨比起动器默认

const IndexPage = () => (
  ...
)

export default IndexPage

盖茨比 - 起动博客

class BlogIndex extends React.Component {
  render() {
    ...

    return (
      ...
    )
  }
}

export default BlogIndex

Answer 1

gatsby-starter-hello-world只渲染Hello Word

gatsby-starter-default是一个无状态组件，来自React文档的引用：

这些组件不得保留内部状态，不具有后备实例，并且不具有组件生命周期方法。它们是输入的纯函数变换，没有样板。但是，您仍然可以通过将它们设置为函数的属性来指定.propTypes和.defaultProps，就像在ES6类上设置它们一样。

gatsby-starter-blog是一个有状态组件它有一个状态，生命周期钩子，每当你需要处理状态时都应该使用一个类组件...

希望这可以帮助