NextJS动态路由，重新渲染特定的Child Components。

Question

我有index.js页面，位于

页面帖子索引.js

我可以用Link渲染这个页面。

<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}} />

我可以重新渲染只 ChildComponent2 与从API获得的值propsValue?

注意：我没有物理文件作为物理文件。 我没有物理文件作为 pagesposts${dynamic-pageId}。我想用这个 pagespostsindex.js，因为我也要在这个hirerachy中渲染因为我也必须在这个hirerachy渲染。

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

它可以在NextJs中实现吗？

Answer 1

当props param发生变化时，组件就会使用变化后的props进行渲染。

现在由于MainComponent使用的是 children如果不进行昂贵的计算，我们就无法阻止它的重新渲染，这无论如何都是一种开销。

然而，我们可以防止 ChildComponent1 通过像PureComponent这样的PureComponent来实现，使其不至于被重新渲染。

class ChildComponent1 extends React.PureComponent {}

如果你的ChildComponent1是一个功能组件，你可以使用React.memo来防止重渲染，如果组件没有任何改变的话

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