เอกสารตอบโต้อย่างเป็นทางการระบุว่า " React.PureComponentเป็นshouldComponentUpdate()เพียงการเปรียบเทียบวัตถุที่ตื้นเท่านั้น" และให้คำแนะนำในกรณีนี้หากรัฐ "ลึก"

ป.ร. ให้ไว้ ณ นี้มีเหตุผลใดทำไมหนึ่งควรจะชอบReact.PureComponentเมื่อสร้างส่วนประกอบ React?

คำถาม :

• มีผลกระทบต่อประสิทธิภาพการใช้งานReact.Componentที่เราอาจพิจารณาใช้React.PureComponentหรือไม่?
• ฉันเดา shouldComponentUpdate()ว่าจะPureComponentทำการเปรียบเทียบที่ตื้นเท่านั้น หากเป็นกรณีนี้จะไม่สามารถใช้วิธีการดังกล่าวเพื่อการเปรียบเทียบที่ลึกกว่านี้ได้?
• "นอกจากนี้React.PureComponent's shouldComponentUpdate()ข้ามประคับประคองการปรับปรุงสำหรับทรีย่อยองค์ประกอบทั้ง" - นี้ไม่ได้หมายความว่าการเปลี่ยนแปลง prop จะถูกละเลย?

คำถามเกิดขึ้นจากการอ่านในบล็อกขนาดกลางนี้ถ้ามันช่วยได้

ความแตกต่างที่สำคัญระหว่างReact.PureComponentและReact.ComponentคือPureComponentการเปรียบเทียบตื้น ๆเกี่ยวกับการเปลี่ยนแปลงสถานะ หมายความว่าเมื่อเปรียบเทียบค่าสเกลาร์จะเปรียบเทียบค่าของพวกมัน แต่เมื่อเปรียบเทียบวัตถุ ช่วยปรับปรุงประสิทธิภาพของแอพ

คุณควรไปReact.PureComponentเมื่อคุณสามารถตอบสนองเงื่อนไขใด ๆ ด้านล่าง

• รัฐ / อุปกรณ์ประกอบฉากควรเป็นวัตถุที่ไม่เปลี่ยนรูป
• รัฐ / อุปกรณ์ประกอบฉากไม่ควรมีลำดับชั้น
• คุณควรโทรforceUpdateเมื่อมีการเปลี่ยนแปลงข้อมูล

หากคุณกำลังใช้งานReact.PureComponentคุณควรตรวจสอบให้แน่ใจว่าองค์ประกอบย่อยทั้งหมดนั้นบริสุทธิ์เช่นกัน

มีผลกระทบต่อประสิทธิภาพในการใช้งาน React.com โดยที่เราอาจพิจารณาเลือกใช้ React.PureComponent หรือไม่

ใช่มันจะเพิ่มประสิทธิภาพแอปของคุณ (เนื่องจากการเปรียบเทียบแบบตื้น)

ฉันคาดเดาว่าควรจะ CompompentUpdate () ของ Purecomponent ทำการเปรียบเทียบแบบตื้นเท่านั้น หากเป็นกรณีนี้จะไม่สามารถใช้วิธีการดังกล่าวสำหรับการเปรียบเทียบลึก

คุณเดาได้ถูกต้อง คุณสามารถใช้มันได้หากคุณปฏิบัติตามเงื่อนไขใด ๆ ที่ฉันได้กล่าวไว้ข้างต้น

"นอกจากนี้ React.PureComponent's shouldComponentUpdate () จะข้ามการอัปเดต prop สำหรับทรีย่อยของส่วนประกอบทั้งหมด" - นี่หมายความว่าการเปลี่ยนแปลง prop ถูกเพิกเฉยหรือไม่?

ใช่การเปลี่ยนแปลง prop จะถูกเพิกเฉยหากไม่พบความแตกต่างในการเปรียบเทียบแบบตื้น

ComponentและPureComponentมีหนึ่งความแตกต่าง

PureComponentเหมือนกับทุกอย่างComponentยกเว้นว่าจะจัดการกับshouldComponentUpdateวิธีการของคุณ

เมื่ออุปกรณ์ประกอบฉากหรือการเปลี่ยนแปลงของรัฐPureComponentจะทำการเปรียบเทียบตื้นกับอุปกรณ์ประกอบฉากและรัฐ Componentในทางกลับกันจะไม่เปรียบเทียบอุปกรณ์ประกอบฉากในปัจจุบันและบอกต่อจากกล่อง ดังนั้นองค์ประกอบจะแสดงอีกครั้งโดยค่าเริ่มต้นเมื่อใดก็ตามที่shouldComponentUpdateมีการเรียก

เปรียบเทียบตื้น

เมื่อเปรียบเทียบอุปกรณ์ประกอบฉากก่อนหน้าและสถานะถัดไปการเปรียบเทียบแบบตื้นจะตรวจสอบว่าแบบดั้งเดิมมีค่าเดียวกัน (เช่น 1 เท่ากับ 1 หรือเป็นจริงเท่ากับจริง) และการอ้างอิงนั้นเหมือนกันระหว่างค่าจาวาสคริปต์ที่ซับซ้อนกว่าเช่นวัตถุและอาร์เรย์

ที่มา: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

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

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

ตัวอย่างเช่นสมมติว่าเรามีโครงสร้างส่วนประกอบที่มีลำดับชั้นสามระดับ ได้แก่ ผู้ปกครองเด็กและลูกหลาน

เมื่ออุปกรณ์ประกอบฉากของผู้ปกครองมีการเปลี่ยนแปลงในลักษณะที่เปลี่ยนอุปกรณ์ประกอบฉากของเด็กเพียงคนเดียวจากนั้น:

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

อย่างไรก็ตามบางครั้งการใช้ส่วนประกอบที่บริสุทธิ์จะไม่มีผลกระทบใด ๆ ฉันมีกรณีเช่นนี้เมื่อผู้ปกครองได้รับอุปกรณ์ประกอบฉากจากร้าน redux และจำเป็นต้องทำการคำนวณอุปกรณ์ประกอบฉากสำหรับเด็กที่ซับซ้อน พาเรนต์ใช้ flatlist เพื่อเรนเดอร์ลูก ๆ

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

ในกรณีนี้คอมโพเนนต์บริสุทธิ์ไม่ได้ช่วยและการเพิ่มประสิทธิภาพสามารถทำได้โดยใช้ส่วนประกอบปกติและการตรวจสอบในเด็ก ๆ ในควร CompompentUpdate หากจำเป็นต้องใช้ตัวเรนเดอร์ซ้ำ