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

ความจริงที่ว่า React ให้คุณสร้างส่วนประกอบเป็นฟังก์ชันบริสุทธิ์เป็นหนึ่งในสาเหตุหลักที่ฉันชอบกรอบงาน

กำหนดส่วนประกอบปฏิกิริยา

นี่คือตัวอย่างการกำหนดส่วนประกอบใน React ในรูปแบบที่แตกต่างกันสามแบบ

อย่างที่คุณเห็น อันแรกClassHelloWorldคือ คอมโพเนนต์ของคลาส FunctionHelloWorldเป็นองค์ประกอบเชิงฟังก์ชันโดยใช้ฟังก์ชันแบบคลาสสิก และArrowHelloWorldเป็นส่วนประกอบฟังก์ชันที่ใช้ฟังก์ชันลูกศร

ฟังก์ชันทั้งสามนั้นเทียบเท่ากันในเอาต์พุต

การใช้ React Props ในส่วนประกอบ

อุปกรณ์ประกอบฉากใช้ใน React เพื่อส่งผ่านตัวแปรไปยังส่วนประกอบ นี่คือวิธีที่คุณใช้ในส่วนประกอบทั้งสองประเภท:

thisแตกต่างที่สำคัญจริงๆคือว่าภายในองค์ประกอบการทำงานคุณจะต้องกำหนดอุปกรณ์ประกอบฉากเป็นอาร์กิวเมนต์ของฟังก์ชันและคุณไม่ได้ใช้

อุปกรณ์ประกอบฉากใช้ในลักษณะเดียวกันไม่ว่าคุณจะใช้ส่วนประกอบประเภทใดประเภทหนึ่ง:

คุณสามารถเห็นในสคริปต์ที่ฉันเพิ่งกำหนดค่าของnameซึ่งจะแสดง:

การสร้างองค์ประกอบที่บริสุทธิ์

การใช้องค์ประกอบการทำงานล้วนๆ ใน React นั้นเหมือนกับการใช้ฟังก์ชั่นล้วนๆ ในการเขียนโปรแกรมเชิงฟังก์ชันใน JavaScript

นี่คือวิธีที่คุณกำหนดองค์ประกอบบริสุทธิ์ในแต่ละวิธี:

ในองค์ประกอบชั้นเรียนคุณขยายReact.PureComponentแทนและในส่วนการทำงานที่คุณตัดการทำงานของคุณในการทำงานที่สูงขึ้นการสั่งซื้อReact.ComponentReact.memo

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

ชื่อฟังก์ชันmemoเป็นตัวย่อของmemoizationซึ่งเป็นเทคนิคการเพิ่มประสิทธิภาพการเขียนโปรแกรมเชิงฟังก์ชันสำหรับการคำนวณแคช

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

การจัดการสถานะส่วนประกอบปฏิกิริยา

การจัดการสถานะภายในของส่วนประกอบจะแตกต่างกันมากขึ้นระหว่างคลาสและส่วนประกอบที่ทำงาน

นี่คือตัวอย่างของการใช้สถานะในองค์ประกอบของคลาส:

สังเกตว่า state ถูกกำหนดให้เป็นอ็อบเจกต์ภายในconstructorคลาสของคุณ คุณสามารถอ่านค่าปัจจุบันได้โดยthis.state.nameเข้าไปที่

เรากำลังแก้ไขสถานะตามonChangeเหตุการณ์ขององค์ประกอบอินพุตโดยใช้this.setStateฟังก์ชัน การแก้ไขสถานะโดยตรงโดยthis.state.name = 'value'จะไม่ทำงาน

ผลลัพธ์คือ:

ในองค์ประกอบการทำงาน ผลลัพธ์เดียวกันทำได้โดยใช้รหัสนี้:

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

การใช้องค์ประกอบการทำงานuseStateตอบสนองเบ็ดเพื่อกำหนดตัวแปรและฟังก์ชั่นname setNameหากคอมโพเนนต์ของคุณต้องการติดตามตัวแปรหลายตัว คุณต้องเรียกใช้useStateสำหรับแต่ละตัวแปร

อาร์กิวเมนต์ที่คุณส่งผ่านuseStateคือค่าเริ่มต้นของคุณ

สถานะไม่ได้ถูกแชร์หรือเข้าถึงได้ภายนอกส่วนประกอบ แต่สามารถส่งผ่านไปยังองค์ประกอบอื่นในฐานะอุปกรณ์ประกอบฉากได้

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

หากคุณต้องการให้แอปพลิเคชันของคุณจัดการสถานะส่วนกลาง คุณควรใช้ไลบรารี เช่น Redux หรือ React hooks เพื่อสร้างมิดเดิลแวร์สำหรับสถานะส่วนกลางที่แยกข้อกังวล

การจัดการการติดตั้งส่วนประกอบ

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

ในองค์ประกอบคลาส คุณจัดการการต่อเชื่อมผ่านฟังก์ชันเหล่านี้:

สามรัฐหลักที่มีการจัดการที่มีฟังก์ชั่นcomponentDidMount, และcomponentWillUnmoutcomponentDidUpdate

เพื่อทดสอบในทางปฏิบัติ เราจะสาธิตการจัดการและสถานะผ่านอย่างชัดเจนในสคริปต์นี้:

นี่คือผลลัพธ์พร้อมมุมมองที่คอนโซล:

และตอนนี้เราจะบรรลุเช่นเดียวกันกับองค์ประกอบการทำงาน:

คราวนี้องค์ประกอบการทำงานใช้รหัส 16 บรรทัดเทียบกับ 26 บรรทัดขององค์ประกอบคลาส

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

เมื่อเราส่งต่ออาร์เรย์ด้วย props [props]React จะเรียกใช้ฟังก์ชันทุกครั้งที่มีpropsการเปลี่ยนแปลง รวมถึงครั้งแรกที่ใช้เมื่อมีการติดตั้งส่วนประกอบ

ความแตกต่างด้านประสิทธิภาพ

เป็นที่เชื่อกันโดยทั่วไปว่าองค์ประกอบการทำงานนั้นเร็วกว่าส่วนประกอบในคลาส และทีม React ได้สัญญาว่าจะปรับปรุงส่วนประกอบการทำงานให้เหมาะสมที่สุด

อย่างไรก็ตาม ฉันยังไม่พบข้อพิสูจน์ใดๆ เกี่ยวกับความแตกต่างด้านประสิทธิภาพโดยตรงของวิธีใดวิธีหนึ่ง ในการทดสอบการเรนเดอร์นี้ ทั้งสองวิธีให้ผลลัพธ์เหมือนกัน:https://jsfiddle.net/69z2wepo/136096/.

บทสรุป

ทั้งองค์ประกอบการทำงานและคลาสใน React มีฟังก์ชันการทำงานเหมือนกัน คุณไม่ควรพลาดสิ่งใดเมื่อใช้วิธีใดวิธีหนึ่ง และไม่แตกต่างกันในประสิทธิภาพการเรนเดอร์

ในตัวอย่างโค้ดในบทความนี้ โดยเฉลี่ยแล้วคอมโพเนนต์การทำงานใช้โค้ดเพียงครึ่งเดียว การเขียนโค้ดน้อยลงหมายความว่าเพื่อนร่วมงานของคุณจำเป็นต้องอ่านน้อยลงเมื่อพวกเขาพยายามทำความเข้าใจ

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

แจ้งให้เราทราบในความคิดเห็นว่าคุณใช้คลาสหรือส่วนประกอบการทำงานในรหัสของคุณเอง