NextJS 动态路由，重新渲染特定的子组件

Question

我有 index.js 页面，位于

pages/posts/index.js

我可以用 Link 呈现此页面：

<Link href={`/posts`} />

这是我的 index.js 页面：

function mainComponent({props}) {
 <>
  <MainComponent>
   <ChildComponent1/>
   <ChildComponent2 props={propsValue}/>
  <MainComponent/>
 </>
}

现在，通过 NextJs 的动态路由，我想使用查询参数并调用 api 来获取

的 propsValue

<ChildComponent2 props={propsValue}>

我使用动态路由，link:

<Link href={/posts/${dynamic-pageId}} />

我可以仅使用从 API 获得的值 propsValue 重新渲染 ChildComponent2 吗？

注意：我没有物理文件/pages/posts/${dynamic-pageId}，我想要使用 /pages/posts/index.js，因为我也必须在这个 hirerachy 中渲染：

<>
<MainComponent>
 <ChildComponent1/>
 <ChildComponent2 props={propsValue}/>
<MainComponent/>

在NextJs中可以吗？

Answer 1

当 props 参数更改时，组件将使用更改后的 props 进行渲染。

现在，由于 MainComponent 使用 children，我们无法阻止它在没有昂贵计算的情况下重新渲染，这无论如何都是一种开销。

但是我们可以通过将 ChildComponent1 实现为像

这样的 PureComponent 来防止重新渲染

class ChildComponent1 extends React.PureComponent {}

如果您的 ChildComponent1 是一个功能组件，您可以使用 React.memo 来防止在组件没有任何变化的情况下重新渲染

const ChildComponent1 = React.memo((props) => {
    // logic here
})

NextJS Dynamic Routing, re-render specific Child Components