如何让组件在页面之间保持一致？

Question

当您从索引页面转到“关于”页面时，RestOfTheApp 会重新呈现。也许SSR应该是这样的，但是nextjs像gatsby一样添加了静态渲染。有没有办法防止组件重新渲染？例如：页面之间的标题不应更改。

about.js

function index() {
  return (
    <>
        <RestOfTheApp> 
          about
        </RestOfTheApp>
    </>
  )
}

索引.js

 function index() {
      return (
        <>
        <RestOfTheApp> 
          index
        </RestOfTheApp>
        </>
      )
    }

我认为您可以使用 redux 来保持组件状态，但是当您只需要获取一些博客内容时整个页面重新渲染似乎很臃肿。我已经测试了一些基本布局，它看起来仍然快如闪电，但不重新渲染整个页面是 SPA 的主要概念，我有点心碎

Answer 1

@Ankit 已经就如何创建持久组件给出了很好的答案。这就是为什么它有效。

pages/a.js那么，当您从某个页面 A（在 中定义）导航到另一个页面 B（在 中定义pages/b.js）时，到底会发生什么？首先，导航发生在客户端。这意味着不是从服务器获取渲染的 HTML，而是在浏览器中运行一些 JavaScript 来渲染新页面。（你可以在这里验证一下。）页面导航的 JavaScript 逻辑可以归结为：

1. <B />如果尚未预取，则从服务器获取新页面组件的 JavaScript 代码；
2. Next.js 将ReactDOM.render()使用 2 个参数进行调用：第一个是要渲染的新 React 元素（可以粗略地认为是更新的组件），第二个是新 React 元素所在的AppDOM 容器元素（始终是）<div id="__next"></div>被渲染成.

简而言之，这个过程可以粗略地认为是将更新后的App组件渲染到<div id="__next"></div>DOM 容器元素中。然后，React 将负责区分新旧 React 元素，并决定重新渲染 DOM 的哪一部分以及更新哪一部分。

那么新旧 React 元素是什么样子的呢？好吧，组件的默认定义App如下所示：

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  // Component will be set to the current page component
  return <Component {...pageProps} />
}

export default MyApp

其中Component变量将设置为当前页面组件。这意味着旧的 React 元素将如下所示：

<A {...pageProps} />

新的 React 元素将如下所示：

<B {...pageProps} />

根据React diffing算法，在比较新旧React元素时，如果被比较的两个元素类型不同，那么对应的子树将被完全销毁并重新渲染。

这正是本例中发生的情况。<A />和<B />是两个不同的组件，被认为是不同的类型，因此对应的 DOM 部分<A />将被销毁并重新渲染为<B />.

这就是为什么当您导航到新页面时，整个页面组件将重新呈现，即使它们包含标头等常见组件。

如果将标头放入自定义App组件中，如下所示：

import Header from '../components/header'

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Header />
      <Component {...pageProps} />
    </div>
  )
}

export default MyApp

然后该<Header />组件将在页面导航中持续存在，因为 React diffing 算法会将其视为相同类型，并且只会对子树进行最少的更新。