Как да използвате клавишите на React, за да избегнете конфликт на компоненти

Подходът на React може да бъде доста сложен и може да срещнете неочаквано поведение или дори фини грешки. Да се ​​отървете от такива грешки може да бъде доста трудно, ако не сте запознати с причината им.

Конкретен бъг възниква, когато условно изобразявате един и същ компонент с различни свойства. Разгледайте подробно този бъг и разберете как да използвате клавишите на React, за да го разрешите.

Компонентите на React не винаги са независими

Неговият прост синтаксис е една от основните причини трябва да научите React. Но въпреки многото предимства, рамката не е без грешки.

Грешката, за която ще научите тук, възниква, когато условно изобразявате един и същ компонент, но му предавате различни подпори.

В случаи като този React ще приеме, че двата компонента са еднакви, така че няма да си прави труда да изобрази втория компонент. В резултат на това всяко състояние, което дефинирате в първия компонент, ще се запази между изобразяванията.

За да демонстрирате, вземете този пример. Първо, имате следното Брояч компонент:

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>
 )
}

Това Брояч компонент приема a име от родителя чрез деструктуриране на обект, което е начин за използвайте подпори в React. След това изобразява името в a. Той също така връща два бутона: един за намаляване на броя в състояние, а другият да го увеличи.

Имайте предвид, че няма нищо лошо в горния код. Грешката идва от следния кодов блок (компонента на приложението), който използва брояча:

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>
 )
}

По подразбиране горният код изобразява брояча с име Kingsley. Ако увеличите брояча на пет и щракнете върху Размяна бутон, ще изобрази втория брояч с име Сали.

Но проблемът е, че броячът няма да се върне към нула по подразбиране, след като сте ги разменили.

Тази грешка възниква, защото и двете състояния изобразяват едни и същи елементи в един и същ ред. React не знае, че броячът "Kingsley" е различен от брояча "Sally". Единствената разлика е в име prop, но за съжаление React не използва това за разграничаване на елементи.

Можете да заобиколите този проблем по два начина. Първият е като промените своя DOM и направите двете дървета различни. Това изисква да разберете какво е DOM. Например, можете да обвиете първия брояч в a елемент и вторият вътре в a елемент:

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>
 )
}

Ако увеличите брояча на "Kingsley" и щракнете Размяна, състоянието се нулира на 0. Отново, това се случва, защото структурата на двете DOM дървета е различна.

Когато е Кингсли променлива е вярно, структурата ще бъде див >див > Брояч (div, съдържащо div, съдържащо брояч). Когато размените състоянието на брояча с помощта на бутона, структурата става див > раздел > Брояч. Поради това несъответствие, React автоматично ще изобрази нов брояч със състояние на нулиране.

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

Използване на клавиши за изобразяване на нов компонент

Ключовете позволяват на React да прави разлика между елементите по време на процеса на изобразяване. Така че, ако имате два елемента, които са абсолютно еднакви, и искате да сигнализирате на React, че единият е различен от другия, трябва да зададете уникален ключов атрибут за всеки елемент.

Добавете ключ към всеки брояч, като този:

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>
 )
}

Сега, когато увеличите брояча на "Kingsley" и щракнете Размяна, React прави нов брояч и нулира състоянието.

Трябва също да използвате ключове, когато изобразявате масив от елементи от същия тип, тъй като React няма да знае разликата между всеки елемент.

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


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

Когато зададете ключове, React ще свърже отделен брояч с всеки елемент. По този начин той може да отразява всички промени, които правите в масива.

Друг усъвършенстван случай на използване на ключ

Можете също да използвате ключове, за да свържете елемент с друг елемент. Например, може да искате да свържете входен елемент с различни елементи в зависимост от стойността на променлива на състоянието.

За да демонстрирате, настройте компонента на приложението:

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>
 )
}

Сега всеки път, когато сменяте между елементи за Kingsley и Sally, вие автоматично променяте ключовия атрибут на вашия вход между „Kingsley“ и „Sally“. Това ще принуди React да рендерира изцяло входния елемент с всяко щракване на бутона.

Още съвети за оптимизиране на приложенията на React

Оптимизацията на кода е ключова за създаването на приятно потребителско изживяване във вашето уеб или мобилно приложение. Познаването на различните техники за оптимизация може да ви помогне да извлечете максимума от вашите React приложения.

Най-добрата част е, че можете да приложите повечето от тези техники за оптимизация и с приложения на React Native.