У меня есть два варианта дизайна:
двухстраничный вариант:
function PageOne() {
return ( <> <Link to="pageTwo"><button></Link>
<navbar>
<contentOne>
</>)
}
function PageTwo() {
return ( <> <Link to="pageOne"><button></Link>
<navbar>
<contentTwo>
</>)
}
опция одной страницы:
function Page()
return ( <> <button>
<navbar>
button ? <contentOne> : <contentTwo>
</>)
)
Был ли вариант с одной страницей быстрее, поскольку он всегда повторно отображает только элементы, а вариант с двумя страницами повторно отображает все элементы, даже если постоянно меняется только содержимое?
Я бы подумал, что это не должно иметь большого значения, виртуальный DOM React и проверка различий означают, что в обоих случаях в реальном DOM будет фактически затронута только часть
contentOne/contentTwo. Таким образом, любая фактическая разница в производительности, вероятно, будет зависеть от того, как вызываются соответствующие функции и сколько они стоят, но разница, если она есть, в большинстве практических случаев, вероятно, будет незначительной. Как всегда: если сомневаетесь, оцените!Я предпочитаю вариант 2, потому что да, он предотвращает ненужные пересчеты (даже если он действительно очень маленький) и содержит меньше кода. Я бы предложил создать компонент под названием Layout, который берет дочерние элементы и выводит панель навигации и прочее.
Это вопрос не только производительности, но и качества кода. Первый пример не DRY. По сути, это дублированный код, в котором отличается только одна часть, что затрудняет его поддержку. Если у вас уникальный макет, в котором всегда отличается только определенная часть, общие элементы должны быть извлечены в компонент.