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