Последнее препятствие перед выпускной в школе Flatiron является Capstone. Это 3 недели проект, который должен заключать в том, чтобы инкапсулировать большинство из того, что мы узнали в программе 15 недель, и создать то, что показывает эти навыки. Шахта Imp-Pility, игра, которая создает стимулы для людей для участия в демократии через законодательные адвокации. Моя первоначальная идея состояла в том, чтобы создать проект, который облегчает законодательный доступ к недопреданным общинам посредством образования. Идея для GameFy Advocacy от думала о том, как сделать что-то, как позвонить своим сенаторе меньше рупом, и больше чего-то люди хотят сделать.
Вызовы
Во время процесса сборки я столкнулся с несколькими проблемами, и рендеринг был одним из них. Когда игрок завершает действие, они нажимают на кнопку, которая открывает модаль с поздравительным сообщением и наградой. Одной из процессов, которые не видны игроку, также добавляют эту награду на общие баллы, которые уже накоплен игрок. Общие награды проводятся в состоянии в приложении. Когда состояние обновляется, компоненты перенаправляют себя. Оставлено без изменений, модаль с поздравлениями и вознаграждением никогда не будет показан, и игрок потеряет все открытые они, и приложение вернется к своему первоначальному состоянию. Это где предотвращение повторного рендеринга в определенных обстоятельствах приходит.
Найти решение
Ниже приведена диаграмма моего приложения. В то время как большинство методов состояния и жизненного цикла с выборами проводятся в основном компоненте, большинство функциональных возможностей приложения после регистрации пользователя происходит в детях домашней страницы Logugedin.
Я начал иметь все в основном, и проезжая реквизит к детским компонентам, которые изменят основное состояние. Это означало, что каждое время изменилось, все приложение будет переназначить. Мое первое решение было использовать метод жизненного цикла, например должен быть необходим предотвратить переработки.
Реагистрационные документы для этого метода являются здесь Отказ
Используйте SOCCOMPONENTUPDATE (), чтобы дать реакцию знать, если вывод компонента не влияет на текущее изменение состояния или реквизита.
Синтаксис моего метода выглядел так:
shouldComponentUpdate(nextState) {
if (this.state.loggedInUserPoints !== nextState.loggedInUserPoints) {
return false;
}
return true;
}
Однако, потому что все было в одном компоненте, этот метод не работал для меня. Я начал отладки, двигаясь, где были проведены определенные методы и состояние, чтобы посмотреть, помогут ли эти вещи в компонентах более низкого порядка.
Как видно на диаграмме выше, большинство компонентов имеют домашнюю страницу в логике в качестве максимальной родительской, а не главной. В то время как общие очки игрока рассчитываются и хранятся в состоянии на главной странице, метод, который их обновляет, называется на карте действий. Перемещая эти методы на домашнюю страницу и ниже, я смог устранить необходимость в основном для переназначения каждый раз, когда действие завершено.
Вывод
Хотя есть несколько разных способов предотвращения повторного рендеринга, например должен быть необходим или Чистые компоненты Кажется, что сначала выясняет структуру компонентов и уточнение размещения состояния и методов – лучший способ обеспечить работу приложения так, как он должен.
Ссылки
Оригинал: “https://dev.to/mezzolite/prevent-re-rendering-save-usability-cak”