javascript - 需要一些帮助来理解 NextJS 重新渲染组件

Question

我正在开发我的第一个 NextS 应用程序，并发现了一些我认为很奇怪的东西。该应用程序旨在成为无头电子商务系统的前端。目前我有几页：

• 家
• 类别
• 产品

前几天我注意到，如果我在产品页面上并单击转到主页，则产品页面组件会在浏览器加载主页时再次运行。我认为我必须useEffect在产品页面组件中有一个引起问题的组件，所以我将其剥离：

const Product = props => {
   console.log("PRODUCT PAGE");
   return (
      <div>product</div>
   );
};
export default Product;

即使使用这个最少的代码，当我导航到主页时也会触发 console.log。怎么/为什么会这样？有没有办法阻止它？

问题是当我更改路线时，我的产品页面似乎完全重新渲染（在幕后不可见），而应该只发生在产品页面上的事情现在正在主页上发生。例如，一些属于产品页面的第三方脚本正在再次添加到 DOM。请注意，点击类别页面也会发生这种情况，主页只是一个示例。

第二个问题 - 我还注意到，我不希望在每次页面更改时重新渲染的东西实际上重新渲染了很多。例如 header / leftnav 每个都在路由更改时重新渲染，即使它们的状态没有改变（每个这些中的 console.logs 都被触发）。我还注意到他们渲染了多次而不是一次。这是正常的，还是我在 _app.js 中搞砸了什么？

提前致谢！

标签： javascriptreactjsnext.js