Како користити Реацт тастере да бисте избегли конфликт компоненти

Реацт приступ може бити прилично компликован и можете наићи на неочекивано понашање или чак суптилне грешке. Отклањање таквих грешака може бити прилично тешко ако нисте упознати са њиховим узроком.

Одређена грешка се јавља када условно рендерујете исту компоненту са различитим својствима. Истражите ову грешку детаљно и сазнајте како да користите Реацт кључеве да бисте је решили.

Реацт компоненте нису увек независне

Његова једноставна синтакса је један од главних разлога требало би да научите Реацт. Али, упркос многим предностима, оквир није без грешака.

Грешка о којој ћете сазнати овде се јавља када условно рендерујете исту компоненту, али јој преносите различите пропс.

У оваквим случајевима, Реацт ће претпоставити да су две компоненте исте, тако да се неће трудити да прикаже другу компоненту. Као резултат, било које стање које дефинишете у првој компоненти ће се задржати између рендеровања.

Да бисте демонстрирали, узмите овај пример. Прво, имате следеће Цоунтер саставни део:

import { useState, useEffect } from"react"
exportfunctionCounter({name}) {
const [count, setCount] = useState(0)
return(


{name}</div>
 setCount(c => c - 1)}> - </button>


 setCount(c => c + 1)}> + </button>
 </div>
 )
}

Ово Цоунтер компонента прихвата а име од родитеља путем деструктурирања објекта, што је начин да се користите реквизите у Реацт-у. Затим приказује име у а. Такође враћа два дугмета: једно за смањење цоунт у стању а други да га повећа.

Имајте на уму да нема ништа лоше у горњем коду. Грешка долази из следећег блока кода (компонента апликације), који користи бројач:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <Countername="Kingsley" />: <Countername="Sally" /> }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Подразумевано, горњи код приказује бројач под именом Кингслеи. Ако повећате бројач на пет и кликнете на Свап дугме, приказаће други бројач по имену Салли.

Али проблем је у томе што се бројач неће вратити на подразумевано стање нуле након што их замените.

Ова грешка се јавља зато што оба стања приказују исте елементе истим редоследом. Реацт не зна да се бројач „Кингсли” разликује од бројача „Сали”. Једина разлика је у име проп, али, нажалост, Реацт то не користи за разликовање елемената.

Овај проблем можете заобићи на два начина. Први је да промените свој ДОМ и учините два стабла различитим. Ово захтева да разумете шта је ДОМ. На пример, можете умотати први бројач унутар а елемент а други унутар а елемент:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return (


 { isKingsley? 
 (<div>
"Kingsley" /> 
 </div>)
: 
 (<section>
"Sally" /> 
 </section>)
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Ако повећате бројач "Кингслеи" и кликнете Свап, стање се враћа на 0. Опет, ово се дешава зато што је структура два ДОМ стабла различита.

Када исКингслеи променљива је истина, структура ће бити див >див > Цоунтер (див који садржи див, који садржи бројач). Када промените стање бројача помоћу дугмета, структура постаје див > одељак > Цоунтер. Због ове неслагања, Реацт ће аутоматски приказати нови бројач са стањем ресетовања.

Можда нећете увек желети да овако мењате структуру своје ознаке. Други начин решавања ове грешке избегава потребу за другачијим означавањем.

Коришћење тастера за рендеровање свеже компоненте

Тастери омогућавају Реацт-у да разликује елементе током процеса рендеровања. Дакле, ако имате два потпуно иста елемента и желите да сигнализирате Реацт-у да се један разликује од другог, потребно је да поставите јединствени атрибут кључа за сваки елемент.

Додајте кључ сваком бројачу, овако:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? 
"Kingsley" name="Kingsley" />: 
"Sally" name="Sally" /> 
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Сада, када повећате бројач "Кингслеи" и кликнете Свап, Реацт приказује нови бројач и ресетује стање на нулу.

Такође би требало да користите кључеве када рендерујете низ ставки истог типа, пошто Реацт неће знати разлику између сваке ставке.

exportdefaultfunctionApp() {
const names = ["Kingsley", "John", "Ahmed"]
return(


 { names.map((name, index) => {
return<Counterkey={index}name={name} />
 })}
 </div>
 )
}

Када доделите кључеве, Реацт ће свакој ставци придружити посебан бројач. На тај начин може одражавати све промене које направите у низу.

Још један случај употребе напредног кључа

Такође можете користити кључеве да повежете елемент са другим елементом. На пример, можда ћете желети да повежете улазни елемент са различитим елементима у зависности од вредности променљиве стања.

Да бисте демонстрирали, подесите компоненту апликације:

import { useState } from"react"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <div>Kingsley's Scorediv>: <div>Sally's scorediv> }
"Kingsley": "Sally" } type="number"/>


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Сада, сваки пут када мењате елемената за Кингслеи и Салли, аутоматски мењате кључни атрибут свог уноса између "Кингслеи" и "Салли". Ово ће приморати Реацт да потпуно поново прикаже улазни елемент сваким кликом на дугме.

Више савета за оптимизацију Реацт апликација

Оптимизација кода је кључна за стварање пријатног корисничког искуства у вашој веб или мобилној апликацији. Познавање различитих техника оптимизације може вам помоћи да максимално искористите своје Реацт апликације.

Најбољи део је што већину ових техника оптимизације можете применити и са Реацт Нативе апликацијама.