nextjs：页面间共享组件

Question

我创建了一个非常简单的Next.js 项目，有两页。

两个页面都包含一个基本的布局组件：

// Page Component  

render() {
  return (
    <PageLayout>
      This is page A
    </PageLayout>
  );
}

页面布局看起来像这样：

// PageLayout

render() {
  return (
    <div>
      <Header />
      {this.props.children}
    </div>
  );
}

因此，两个页面都使用PageLayout来呈现一个基本模板，该模板在两个页面上也包含相同的Header 。

我的问题是在两个页面之间导航时重新创建了Header组件。 我认为这不仅从性能的角度来看很糟糕，而且因为在这种情况下所有 DOM 节点和所有 React 组件都失去了它们的本地状态。

所以我想知道是否有我遗漏的东西，或者我们如何在正确重用的页面之间创建共享组件（至少如果它们的状态没有改变，当然）。

Answer 1

您有两个具有共同组件的页面：

页面A :

<A>
  <Common />
</A>

页面B：

<B>
  <Common />
</B>

从反应文档：

每当根元素有不同的类型时，React 就会拆除旧树并从头开始构建新树。 从<a>到<img> ，或从<Article>到<Comment> ，或从<Button>到<div> - 这些都将导致完全重建。

这就是为什么您会丢失 Common (Header) 组件中的状态。 就像我在评论中建议的那样，您必须使用像 redux 这样的外部状态。

Answer 2

您必须创建一个名为布局的组件

// components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

然后像这样说唱你的 _app.js 组件

// pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

更多阅读https://nextjs.org/docs/basic-features/layouts