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

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

页面 A ：

<A>
  <Common />
</A>

页面 B：

<B>
  <Common />
</B>

From the React documentation：

  

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

这就是您在Common（Header）组件中丢失状态的原因。就像我在评论中建议的那样，你必须使用像redux这样的外部状态。