gatsby-plugin-布局仍然在每个页面加载上安装布局。

Question

我已经将gatsby-plugin-layout安装到我的项目文件中，创建了src/layouts/index.js，并将gatsby-plugin-layout添加到gatsby-config.js中。Gatsby应用程序编译并可以在开发服务器上服务，但是通过我的布局组件的console.log输出，我看到布局组件仍然在每个页面加载上重新挂载。我的目标是让布局组件在反应应用的过程中只挂载一次。

src/layouts/index.js

import React from "react"
import Header from "../components/header"
import Footer from "../components/footer"
import Particles from "react-particles-js"
import particlesConfig from "../json/particlesjs-config-particles.json"

class Layout extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    console.log("Layout mounted");
  }

  componentDidUpdate() {
    console.log("Layout updated");
  }

  render() {
    return (
      <>      
        <Header />
        <div id="particlesContainer">
            <Particles params={particlesConfig}/>
        </div> 
        {this.props.children}
        <Footer />      
      </>
    )
  }
}

export default Layout

gatsby-config.js

module.exports = {
  siteMetadata: {
    /*...*/
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-layout`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: `gatsby-transformer-csv`,
      options: {
        delimiter: ['|'],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-transformer-remark`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        /* ... */
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

可能出什么问题了？

Answer 1

我意识到了我的问题。我没有从每个单独的页面中删除布局组件，因此没有获得gatsby-plugin-layout的好处。删除我的每个页面中包含的布局组件后，一切正常工作。

Answer 2

Gatsby站点不是当您使用React而没有任何其他框架时得到的单一页面应用程序。Gatsby是一个静态站点生成器，它使用内部响应，但构建真正的HTML页面。

因此，实现布局的每个页面都将将布局定义为其页面HTML的一部分。因此，它将为每个页面重新挂载，因为它是在每个HTML页面中定义的，并且每次导航到页面时都会调用componentDidMount()。

关于使用Persisting layout between page changes for e.g. animating navigation的插件特性之一:我想在处理此特性的插件组件中定义了某种全局状态。这是在我的项目中，我使用没有插件的情况。