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

Question

我有位于

的index.js页面

页面/帖子/index.js

我可以使用链接呈现此页面：

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

这是我的index.js页面：

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

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

的propsValue

<ChildComponent2 props={propsValue}>

我通过此链接使用动态路由：

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

我只能使用从API获得的值propsValue重新渲染 ChildComponent2 吗？

注意：：我没有物理文件作为 / pages / posts / $ {dynamic-pageId} ，我想使用该 / pages / posts / index.js ，因为我也必须在此级别中进行渲染：

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

NextJs可能吗？

Answer 1

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

现在，由于MainComponent使用的是children，因此如果不进行昂贵的计算，我们将无法阻止其重新呈现，这反而会增加开销。

但是我们可以通过将其实现为PureComponent之类的方式来防止ChildComponent1重新呈现

class ChildComponent1 extends React.PureComponent {}

如果您的ChildComponent1是一个功能组件，则可以使用React.memo来防止重新渲染（如果对该组件没有任何更改）

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