- รายการ (Lists)ใน ReactJS
- คีย์ (Keys) ใน ReactJS
- การเลือกคีย์ (Choosing Keys)
- การฝัง (Embedding) map() ใน JSX
- การสกัด (Extracting) ส่วนประกอบ
- Keys ต้องไม่ซ้ำกันในหมู่พี่น้อง (Siblings) เท่านั้น
- ผลกระทบของคีย์ต่อประสิทธิภาพ
ReactJS ซึ่งเป็นไลบรารี JavaScript ที่ทรงพลังสำหรับการสร้างอินเทอร์เฟซผู้ใช้แบบไดนามิก ทำให้วิธีที่เราทำเว็บ ReactJS และทำแอพง่ายขึ้นอย่างมาก มันนำแนวคิดและกลไกที่สำคัญหลายอย่างมาสู่ตาราง เพิ่มประสิทธิภาพการทำงานและการบำรุงรักษาโค้ดของเรา วันนี้เราจะเจาะลึกหนึ่งในแนวคิดพื้นฐานเหล่านี้: รายการและคีย์ แนวคิดนี้มีความสำคัญต่อการทำความเข้าใจวิธีการแสดงคอลเลกชันของรายการที่คล้ายกันใน ReactJS อย่างมีประสิทธิภาพ
หากคุณสนใจที่จะ สำรวจแง่มุมอื่นๆ ของไลบรารีที่โดดเด่นนี้ คุณอาจต้องการดูคู่มือฉบับสมบูรณ์ของเราเกี่ยวกับการทำเว็บ ReactJS และทำแอพ คู่มือฉบับสมบูรณ์นี้ครอบคลุมทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับการทำเว็บ ReactJS และทำแอพที่ใช้งานได้จริงและสวยงามด้วย ReactJS
1. รายการ (Lists)ใน ReactJS
ใน JavaScript แบบดั้งเดิม เรามักจะใช้การวนซ้ำ เช่น วิธีการวนซ้ำ ‘for’ หรือ ‘map’ เพื่อวนซ้ำอาร์เรย์และแสดงรายการ หลักการเดียวกันนี้ใช้กับ ReactJS แต่มีการบิด JSX
ลองพิจารณาตัวอย่าง สมมติว่าเรามีอาร์เรย์ของตัวเลขและเราต้องการแสดงรายการของตัวเลขเหล่านี้ นี่คือวิธีที่เราสามารถทำได้ใน React:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);ในตัวอย่างด้านบน เรากำลังจับคู่อาร์เรย์ ‘numbers’ กับอาร์เรย์ขององค์ประกอบ ‘li’ จากนั้นเราแสดงอาร์เรย์นี้ภายในแท็ก ‘ul’
2. คีย์ (Keys) ใน ReactJS
ในขณะที่ตัวอย่างก่อนหน้านี้แสดงให้เห็นถึงวิธีการสร้างรายการ มันละเลยประเด็นสำคัญใน React: คีย์ คีย์คือแอตทริบิวต์สตริงพิเศษที่คุณต้องรวมไว้เมื่อสร้างรายการองค์ประกอบใน React คีย์ช่วยให้องค์ประกอบต่างๆ มีเอกลักษณ์ที่มั่นคง ช่วยให้ React สามารถระบุได้อย่างมีประสิทธิภาพว่ารายการใดมีการเปลี่ยนแปลง เพิ่ม หรือถูกลบออกระหว่างการอัปเดต
ต่อไปนี้คือวิธีกำหนดคีย์ให้กับตัวอย่างก่อนหน้าของเรา:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);ในกรณีนี้ เรากำลังใช้ตัวเลขแต่ละตัวเป็นคีย์ อย่างไรก็ตาม ตัวเลขอาจไม่ซ้ำกันเสมอไป และ React ต้องการให้คีย์ไม่ซ้ำกันในหมู่พี่น้อง ในการใช้งานจริง คุณอาจใช้ ID รายการจากข้อมูลของคุณเป็นคีย์
3. การเลือกคีย์ (Choosing Keys)
การเลือกคีย์ที่ถูกต้องเป็นสิ่งสำคัญ ในกรณีที่คุณไม่มีรหัสคงที่สำหรับรายการที่แสดงผล คุณอาจใช้ดัชนีรายการเป็นคีย์เป็นทางเลือกสุดท้าย:
const listItems = numbers.map((number, index) =>
<li key={index}>{number}</li>
);อย่างไรก็ตาม สิ่งนี้อาจส่งผลเสียต่อประสิทธิภาพและอาจทำให้เกิดปัญหากับสถานะส่วนประกอบ หากรายการของคุณสามารถจัดลำดับใหม่ได้ การใช้ดัชนีอาจทำให้เกิดข้อผิดพลาดได้
เมื่อคุณไม่มี ID ที่คงที่สำหรับรายการของคุณ คุณอาจต้องทบทวนโมเดลข้อมูลของคุณใหม่ หลักทั่วไปที่ดีคือองค์ประกอบมีคีย์เดียวกันทุกครั้งที่แสดงผลเพื่อรักษาเอกลักษณ์และรักษาสถานะ
4. การฝัง (Embedding) map() ใน JSX
อีกแนวทางหนึ่งคือการฝังmap()ฟังก์ชันภายใน JSX:
ReactDOM.render(
<ul>
{numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
)}
</ul>,
document.getElementById('root')
);เป็นเรื่องปกติที่จะวางmap()สายไว้ในวงเล็บปีกกาใน JSX แม้ว่าสิ่งนี้อาจดูสับสนในตอนแรก แต่คุณจะค่อยๆ ชินกับมันเมื่อเวลาผ่านไป และเป็นรูปแบบที่มีประโยชน์ซึ่งช่วยให้คุณเขียนโค้ดที่กระชับมากขึ้น
เรากำลังใช้นิพจน์ JavaScript โดยตรงใน JSX ของเรา ฟังก์ชัน JavaScript map()สร้างอาร์เรย์ใหม่ที่บรรจุผลลัพธ์ของการเรียกใช้ฟังก์ชันที่มีให้ในทุกองค์ประกอบในอาร์เรย์ เมื่อวางฟังก์ชันนี้ใน JSX เรากำลังสร้างและเรนเดอร์อาร์เรย์ใหม่ขององค์ประกอบ JSX ทันที
5. การสกัด (Extracting) ส่วนประกอบ
เมื่อแอปพลิเคชันของคุณเติบโตขึ้น คุณอาจต้องการแยกส่วนประกอบเพื่อให้อ่านง่ายและนำมาใช้ซ้ำได้ นี่เป็นแนวปฏิบัติที่ดีในการทำให้โค้ดของคุณสะอาดและบำรุงรักษาได้ ตัวอย่างเช่น แทนที่จะแมปรายการของเราโดยตรงภายใน JSX เราสามารถสร้างส่วนประกอบใหม่ListItemที่ยอมรับnumberและkeyเป็นอุปกรณ์ประกอบฉาก:
function ListItem({ value, key }) {
return <li key={key}>{value}</li>
}
function NumberList({ numbers }) {
const listItems = numbers.map((number) =>
<ListItem key={number.toString()} value={number} />
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);ในตัวอย่างนี้ เรากำลังทำสิ่งสำคัญสองสามอย่าง เรากำลังแบ่งรายการออกเป็นองค์ประกอบที่เล็กลงและสามารถจัดการได้มากขึ้น นอกจากนี้ เรายังส่งคีย์ไปยังListItemส่วนประกอบของเรา ซึ่งตอนนี้รับผิดชอบในการแสดงผลแต่ละรายการ
6. Keys ต้องไม่ซ้ำกันในหมู่พี่น้อง (Siblings) เท่านั้น
ความเข้าใจผิดทั่วไปอย่างหนึ่งเกี่ยวกับคีย์ใน React คือต้องไม่ซ้ำกันทั่วโลก อย่างไรก็ตาม Keys จะต้องไม่ซ้ำกันในหมู่พี่น้องเท่านั้น พวกเขาไม่จำเป็นต้องไม่ซ้ำกันในแอปพลิเคชันทั้งหมด
คีย์ช่วย React ระบุว่ารายการใดมีการเปลี่ยนแปลง ถูกเพิ่ม หรือถูกลบออก ควรกำหนดคีย์ให้กับองค์ประกอบภายในอาร์เรย์เพื่อให้องค์ประกอบมีเอกลักษณ์ที่มั่นคง วิธีที่ดีที่สุดในการเลือกคีย์คือการใช้สตริงที่ระบุข้อมูลในรายการโดยไม่ซ้ำกันระหว่างพี่น้องกัน
7. ผลกระทบของคีย์ต่อประสิทธิภาพ
เมื่อพูดถึงการทำเว็บ ReactJS และทำแอพ การเพิ่มประสิทธิภาพเป็นสิ่งสำคัญ คีย์มีบทบาทสำคัญในการเพิ่มประสิทธิภาพเมื่อแสดงผลรายการ เมื่อ React ปรับความแตกต่างระหว่างเวอร์ชันเก่าและเวอร์ชันใหม่ของรายการ จะใช้คีย์เหล่านี้เพื่อกำหนดว่ารายการใดได้รับการแก้ไข
หากไม่มีคีย์ React จะไม่สามารถเชื่อมโยงองค์ประกอบกับอินสแตนซ์ก่อนหน้าได้ ผลที่ตามมาคือ React จะละทิ้งอินสแตนซ์เก่าและสร้างใหม่แทนที่ ซึ่งนำไปสู่การเรนเดอร์ซ้ำที่ไม่มีประสิทธิภาพ ด้วยการให้คีย์ คุณทำให้กระบวนการนี้มีประสิทธิภาพมากขึ้นโดยอนุญาตให้ React นำองค์ประกอบ DOM ที่มีอยู่กลับมาใช้ใหม่ได้
การใช้รายการและคีย์อย่างเชี่ยวชาญใน ReactJS เป็นพื้นฐานในการทำเว็บ ReactJS และทำแอพแบบไดนามิก มีประสิทธิภาพ และปรับขนาดได้ เมื่อคุณเจาะลึกเข้าไปในโลกของ React ต่อไป แนวคิดเหล่านี้จะกลายเป็นลักษณะที่สอง ทำให้คุณทำเว็บ ReactJS และทำแอพที่ซับซ้อนและมีประสิทธิภาพมากขึ้นเรื่อยๆ
ไม่ว่าคุณจะเพิ่งเริ่ม ใช้React หรือต้องการทำความเข้าใจให้ลึกซึ้งยิ่งขึ้น อย่าลืมอ่านคู่มือของเราเกี่ยวกับการทำเว็บ ReactJS และทำแอพ คุณจะพบความรู้มากมายที่จะช่วยคุณในเส้นทางที่ไม่เพียงแต่ทำเว็บ ReactJS และทำแอพเท่านั้น แต่ยังสร้างประสบการณ์ที่ยอดเยี่ยมให้กับผู้ใช้ของคุณด้วย