สถานะการยกใน React

การยกสถานะส่วนประกอบมักเป็นวิธีปฏิบัติที่เหมาะสมที่สุดวิธีหนึ่งในการจัดการการแลกเปลี่ยนข้อมูลระหว่างพี่น้อง มันค่อนข้างง่ายและตรงไปตรงมา เรามาดูกันว่าจะใช้อย่างไรและเมื่อไหร่

ลองนึกภาพคุณกำลังทำงานในโครงการที่คุณขายตั๋วหนัง:

องค์ประกอบ Cinema ปัจจุบันของคุณดูเรียบร้อย:

แอปนี้ดูเหมือนจะทำงานได้ดี แต่กลุ่มของการวิเคราะห์ตลาดบอกคุณว่าแอปพลิเคชันของคุณดึงดูดผู้ใช้ไม่เพียงพอ ดังนั้นคุณจึงตัดสินใจว่าโรงภาพยนตร์ของคุณต้องมีคุณลักษณะพิเศษบางอย่างเพื่อที่จะชนะการแข่งขัน

สมมติว่าเพื่อเป็นโรงละครพิเศษ คุณต้องเปิดสนามเด็กเล่นและให้สิทธิ์เด็กเข้าชมฟรี ในกรณีที่ผู้ใช้จะซื้อตั๋ว 3 ใบขึ้นไป และแน่นอน คุณต้องทบทวนวิธีการคำนวณราคาของคุณอีกครั้ง

ดังนั้น คุณจึงสร้างส่วนประกอบที่ใหม่และสวยงามสำหรับการคำนวณราคา:

ดังนั้นองค์ประกอบ Cinema ของคุณจะเป็นแบบนี้

เราทราบดีว่าส่วนประกอบ<ที่นั่ง />มีสถานะพร้อมข้อมูลที่นั่งที่เลือกทั้งหมด และจำนวนที่นั่งที่เลือกก็จำเป็นสำหรับ<TotalPriceCalculator /> ของเรา

ดังนั้นตอนนี้เราจึงต้องหาวิธีแก้ปัญหาสำหรับการแบ่งปันสถานะระหว่างส่วนประกอบพี่น้อง

และนั่นคือสถานการณ์ที่เหมาะสำหรับเทคนิคของการยกสถานะขึ้น

แนวคิดทั่วไปนั้นค่อนข้างง่าย: หากมีกรณีที่ส่วนประกอบพี่น้องขึ้นอยู่กับแต่ละสถานะอื่น ให้ย้ายสถานะของพวกเขาไปยังองค์ประกอบหลักที่ใกล้ที่สุดและส่งผ่านค่าสถานะเป็นอุปกรณ์ประกอบฉากกลับไปยังลูก

ข้อมูลเพิ่มเติมได้ที่อย่างเป็นทางการตอบสนองเอกสาร

ในกรณีของเรา เราเพียงแค่ต้องยกสถานะจากคอมโพเนนต์<Seats/>เป็น<Cinema />

ตอนนี้องค์ประกอบ <Cinema /> ของเรามีลักษณะเช่นนี้

มาสรุปสิ่งที่เราเพิ่งทำไป:

1. เราสกัดจากรัฐของเรา<ที่นั่ง />ส่วนประกอบ<Cinema />ส่วนประกอบ;
2. เรากำลังส่งค่าสถานะไปยังส่วนประกอบย่อยผ่านอุปกรณ์ประกอบฉาก

ควรมี "แหล่งความจริง" เพียงแหล่งเดียวสำหรับข้อมูลที่เปลี่ยนแปลงในแอปพลิเคชัน React โดยปกติ สถานะจะถูกเพิ่มลงในองค์ประกอบที่ต้องการสำหรับการแสดงผลก่อน จากนั้น หากส่วนประกอบอื่นๆ ต้องการด้วย คุณสามารถยกให้บรรพบุรุษร่วมที่ใกล้เคียงที่สุดได้ แทนที่จะพยายามซิงค์สถานะระหว่างส่วนประกอบต่างๆ คุณควรพึ่งพาโฟลว์ข้อมูลจากบนลงล่าง

คุณสามารถค้นหาตัวอย่างการทำงานได้จากบทความนี้ที่นี่ :)