@McHack

Как объявить общую переменную в React и использовать ее для рендера отдельных компонент?

Здравствуйте, господа. Делаю горизонтальное меню на React и у меня возникла проблема перерендера того, что не нужно рендерить заного. Пишу на функциональных компонентах!

Имея такую структуру:
// MenuItem - отдельный дочерний компонент для каждого пункта меню
// showChild - переменная в которой хранится ID главного пункта, где должны отобразиться дочерние элементы

сonst [showChild, setShowChild] = useState(null)

const toggleMenu = (id, with_child, fl, e) => {
		if(with_child !== '' && fl) {
			if (showChild !== id)
				setShowChild(id)
			else {
				Fade.Out('.j_h_menu_child_sub[id="' + id + '"]', 200, function () {
					setShowChild(null)
				})
			}

			e.preventDefault()
		}
		else
			return true
	}

return (
		<div className="i_h_menu_react">
			{items.map((item) =>
				<MenuItem item={item} key={item.ID} showChild={showChild} setShowChild={toggleMenu} ww_mob={ww_mob}/>
			)}
		</div>
	)


P.S. Я специально выложил только часть кода, дабы упростить понимание процесса.

Через дочерний компонент я вызываю функцию, которая меняет showChild, подставляя туда другой ID. Такой подход мне необходим для того, чтобы дочерние элементы отображались только в кликнутом пункте, а в остальных были скрыты. При переклике на другой пункт, старые дочерки скрывались и появлялись в другом пункте.

Однако обновляя showChild React по новой рендерит абсолютно все компоненты. Грубо говоря запускает цикл в шаблоне по новой. Соответственно происходит Mount всех компонент по новой.

Как мне объявить переменную, которая хранилась бы в главной компоненте и не запускала перерендер при ее изменении. Но такую, чтобы я смог отследить ее изменение в дочерних компонентах и соответственно запустить перерендер только в нужной мне компоненте.
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 1
@dimoff66
Кратко о себе: Я есть
Объявляете обычную переменную типа объект и просовываете ее в дочерние через свойства или через useContext. В любое из ее свойств пишете нужное вам значение, это не запустит обновления. И добавляете таймаут, который отслеживает изменение.

Это конечно если не использовать redux

Но вообще непонятно в чем проблема перерендеринга всех детей? У вас их так много, что приложение тормозит или что?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы