小编its*_*yme的帖子

我正在尝试遵循官方文档和Adam Wathan 的文章中介绍的持久布局示例。

这是我目前所知道的：

• 我了解 React 的协调过程。我知道如果 React 意识到组件的虚拟 dom 树没有改变，那么它就不会更新该树/组件的 html dom 元素。我用来更好地理解其中一些概念的文章
• 如果组件的状态发生变化，React 会重新渲染组件。如果一个 prop 改变了，它不应该改变吗？或者是否有一个假设，即道具隐含地被视为一种状态？
• 如果父级重新渲染，则子级将被重新渲染。
• 我知道（尽管仍然需要学习/阅读）React.memo。一旦我这样做了，我也计划利用它。我隐约意识到它会缓存给定输入（props）的组件，如果 props 没有改变，它会返回缓存的组件。

基于上述内容，我想说持久布局是有效的，因为中使用的布局_app.js是提供页面作为其道具（子级）的。由于布局自身的状态不会改变，因此布局不应该被重新渲染。然而，这不是我注意到的，因此才有了这个冗长的问题。

我很清楚，当我说重新渲染时，我指的是 React 为组件重新创建虚拟 dom，而不是重新绘制 html dom。我的问题是前者，而不是后者。

我看到的是，每次我单击“个人资料”链接（即使我已经在同一页面上）：

1. 整个布局（包括顶部导航栏、图标、搜索栏和链接）全部重新渲染。
2. 我看到每个控制台日志消息都被打印出来。
3. 我使用了“Profiler”工具，它也向我显示了所有组件的重新渲染。

我认为持久布局意味着它不会一直被重新评估？控制台日志的打印表明该组件每次都被重新评估。我知道 React.memo 会完全避免这种情况，但是“持久性”到底是什么？在这种情况下，我对持久布局缺少或无法理解什么？

我所拥有的看起来像这样：

/pages/profile.js （以及类似的 /pages/anotherPage.js）

function sampleProfilePage (props) = {
   return (
      <div>I am on profile page</div>
   );
}
export default sampleProfilePage

_app.js

function MyApp({Component, pageProps}) {
   return (
      <SimpleLayout>
         <Component {...pageProps} />
      <SimpleLayout />
   );
}

SimpleLayout.js …