ตอบโต้เพื่อชัยชนะ!?

Learning React ที่ Flatiron เป็นประสบการณ์ที่ดีและเป็นประสบการณ์ที่สนุก เพราะฉันเห็นศักยภาพมากมายสำหรับการสร้างแอปพลิเคชันในอนาคต

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

เพื่อนๆ ‍‍‍

ไม่ใช่พวกเขาที่ดีที่สุด? พวกเขามองหาเรา ทำให้เราหัวเราะ และที่สำคัญที่สุด สามารถทำให้ชีวิตเราง่ายขึ้น(เกือบทุกครั้ง) !

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

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

ส่วนประกอบ — ใช้ซ้ำ เขียน & เก็บสถานะ ♻️

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

เราเรียกอินพุตของพวกเขาpropsและstateและ เอาต์พุตส่วนประกอบคือคำอธิบายของ UI เราสามารถนำส่วนประกอบเดียวมาใช้ซ้ำได้ในหลายอินเทอร์เฟซผู้ใช้ และส่วนประกอบสามารถมีส่วนประกอบอื่นๆ ได้

การไหลของข้อมูลทิศทางเดียว

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

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

Redux — การจัดการของรัฐ

Redux ไม่ใช่การจัดการสถานะพิเศษสำหรับ React แต่เป็นที่รู้จักโดยนักพัฒนา React มากกว่าที่พวกเขารู้จัก Angular เป็นต้น

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

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

ตะขอ

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

เพิ่มประสิทธิภาพ

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

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