Далее JS Dynami c Маршрутизация, повторная визуализация, указанная c Дочерние компоненты - PullRequest
Новая
       84

Далее JS Dynami c Маршрутизация, повторная визуализация, указанная c Дочерние компоненты

0 голосов
/ 02 мая 2020

У меня есть индекс. js страница, расположенная по адресу

страниц / сообщений / индекса. js

Я могу сделать эта страница со ссылкой: 

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

это мой индекс. js страница: 

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

Теперь, с динамической c маршрутизацией Next Js, я хочу используйте параметры запроса и вызовите API, чтобы получить propsValue для

<ChildComponent2 props={propsValue}>

Я использую Dynami c маршрутизацию, по этой ссылке: 

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

Могу ли я повторно Отображать только ChildComponent2 с полученным значением propsValue из API?

Примечание: У меня нет физических файлов как / pages / posts / $ {dynamici c -pageId} , я хочу использовать это / pages / posts / index. js, потому что я тоже должен рендерить в этом наймах: 

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

возможно ли это в следующем Js?

1 Ответ

1 голос
/ 02 мая 2020

Когда параметр props изменяет рендеринг компонента с измененными реквизитами.

Теперь, когда MainComponent использует children, мы не можем предотвратить его повторный рендеринг без дорогостоящих вычислений, которые в любом случае будут непроизводительными.

Однако мы можем предотвратить повторный рендеринг ChildComponent1, реализовав его как PureComponent, например 

class ChildComponent1 extends React.PureComponent {}

В случае, если ваш ChildComponent1 является функциональным компонентом, вы можете использовать React. памятка для предотвращения повторного рендеринга, если ничего не изменилось для компонента 

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