Могу ли я избежать повторного рендеринга родительского компонента обработчика маршрута при изменении маршрута?

Question

Я нубы в срабатываем/перевождите, и я ищу, чтобы создать модальное представление следующих за этим-правилами:

• , зависимый
• URL, который является общим
• , который оптимизирован

Причина, связанная с зависимостью URL-адреса, не оптимизирована, она переименовывает родителя.

Пример: У меня есть представление пространства имен просмотра на «/» пространств имен, которые печатают все пространства имен и когда я открываю «/ пространства имен/редактировать», который откроет модальное представление пространств имен являются повторно вызывать. Как не перерегистрировать список имен?

Ниже Router

<Route path="namespaces" component={NamespaceList}> 
    <Route path="edit" component={NamespaceEdit}/> 
    <Route path="create" component={NamespaceCreate}/> 
</Route> 

NamespacesList компонента

function NamespacesList({ push, children }) { 
    console.log("rendered !") 
    return (
    <div> 
     NamespacesList 
     <p> 
     <Link to="/namespaces/create">Create</Link> 
     <br /> 
     <Link to="/namespaces/edit">Edit</Link> 
     </p> 
     {children} 
    </div> 
) 
} 

NamespacesCreate компонента (напечатаны внутри модально)

const NamespacesCreate = function() { 
    return (
    <Modal> 
     NamespacesCreate 
     <p> 
     <Link to="/namespaces">Back to namespaces list ?</Link> 
     </p> 
    </Modal> 
) 
} 

Использовал случай: Я нахожусь на /templates/create (namespacelist рисует в задней части модального, в консоли rendered ! печатается тогда, когда я нажимаю ссылку, чтобы вернуться к исходному URL-адресу /templates, rendered ! напечатан снова.

Так что есть способ «оптимизировать» его, а не переименовать namespaceList или мне нужно выбрать между ними, или я ошибаюсь?

Answer 1

Не беспокойтесь о том, сколько раз вызывается метод компонента render(). Рендеринг очень дешевый в реакторе, и если контент не изменился, он фактически не коснется DOM.

Вы должны только начать беспокоиться о вызовах метода render(), когда вы начинаете испытывать реальные проблемы с производительностью в своем приложении, что маловероятно для одноразовых вещей, таких как навигационные. Например, вы можете оптимизировать анимацию или составлять компоненты, содержащие тонны входов.

Если и когда вас есть эта проблема (не раньше!), Вы можете проверить Реагировать направляющие Advanced Performance оптимизаций, measuring wasted renders with ReactPerf и learn about common performance anti-patterns.

Не допускайте, чтобы это осложняло ваш код без причины. Оптимизируйте только тогда, когда у вас есть настоящая проблема, и не раньше. Реакция очень быстро для большинства потребностей пользователей из коробки, а метод render(), вызываемый часто, отлично работает.