nextjs：页面间共享组件

Question

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

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

// Page Component  

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

PageLayout 看起来像这样：

// PageLayout

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

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

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

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

Answer 1

你必须创建一个名为 layout 的组件

// 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

Answer 2

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

页面A：

<A>
  <Common />
</A>

页面B：

<B>
  <Common />
</B>

From the React documentation:

只要根元素有不同的类型，React 就会拆掉 老树并从头开始构建新树。从<a> 到 <img>，或从 <Article> 到 <Comment>，或从 <Button> 到 <div> - 任意 其中将导致全面重建。

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