Question

盖茨比的网站上有一个非常好的教程。一切正常，但是我很难理解入门模板的区别。

starte模板中不同的React组件用法之间有什么区别？他们为什么使用export default...作为Hello World示例，const IndesPage = () 0> (作为默认启动程序，而class BlogIndes extends React.Componenent作为博客示例。

gatsby-starter-hello-world

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

gatsby-starter-default

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

export default IndexPage

gatsby-starter-blog

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 是有状态的组件它具有状态，生命周期挂钩，每当需要使用状态时都应使用类组件...

希望这会有所帮助

导出default / const / class扩展有什么区别？

1 个答案: