כיצד להשתמש במקשי 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>
 )
}

זֶה דֶלְפֵּק רכיב מקבל א שֵׁם מההורה דרך הרס אובייקט, שזו דרך לעשות זאת השתמש באביזרים ב-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 לא יודע שדלפק "קינגסלי" שונה מדלפק "סאלי". ההבדל היחיד הוא ב שֵׁם prop אבל, למרבה הצער, React לא משתמש בזה כדי להבדיל בין אלמנטים.

אתה יכול לעקוף את הבעיה בשתי דרכים. הראשון הוא על ידי שינוי ה-DOM שלך והפיכת שני העצים שונים. זה מחייב אותך להבין מהו ה-DOM. לדוגמה, אתה יכול לעטוף את הדלפק הראשון בתוך א אלמנט והשני בתוך 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>
 )
}

אם תגדיל את מונה "קינגסלי" ולחץ לְהַחלִיף, המצב מתאפס ל-0. שוב, זה קורה כי המבנה של שני עצי ה-DOM שונה.

כאשר זה קינגסלי משתנה הוא נָכוֹן, המבנה יהיה div >div > דֶלְפֵּק (div המכיל div, המכיל Counter). כאשר אתה מחליף את מצב המונה באמצעות הכפתור, המבנה הופך 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>
 )
}

כעת, כאשר אתה מגדיל את מונה "קינגסלי" ולחץ לְהַחלִיף, 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>
 )
}

עכשיו, בכל פעם שאתה מחליף בין ה רכיבים עבור קינגסלי וסאלי, אתה משנה אוטומטית את תכונת המפתח של הקלט שלך בין "קינגסלי" ל"סאלי". זה יאלץ את React לעבד מחדש לחלוטין את רכיב הקלט בכל לחיצה על הכפתור.

טיפים נוספים למיטוב יישומי React

אופטימיזציה של קוד היא המפתח ליצירת חווית משתמש נעימה באינטרנט או באפליקציה שלך לנייד. ידיעה על טכניקות אופטימיזציה שונות יכולה לעזור לך להפיק את המרב מיישומי React שלך.

החלק הטוב ביותר הוא שאתה יכול ליישם את רוב טכניקות האופטימיזציה הללו גם עם יישומי React Native.