React Native 0.61 Update นำเสนอฟีเจอร์ใหม่ที่สำคัญที่ช่วยปรับปรุงประสบการณ์การพัฒนา
คุณสมบัติของ React Native 0.61
ใน React Native 0.61 เราได้รวมไฮไลท์ “การรีโหลดแบบสด” (โหลดซ้ำเมื่อบันทึก) และ “การรีโหลดแบบด่วน” ในปัจจุบันเข้าด้วยกันเป็นฟีเจอร์ใหม่ที่เรียกว่า “Fast Refresh” Fast Refresh ประกอบด้วยหลักการดังต่อไปนี้:
- รีเฟรชอย่างรวดเร็ว รองรับ React ในปัจจุบันอย่างสมบูรณ์ รวมถึงส่วนประกอบของฟังก์ชันและ Hooks
- Fast Refresh จะกู้คืนหลังจากการพิมพ์ผิดและข้อผิดพลาดต่างๆ และกลับไปโหลดซ้ำทั้งหมดเมื่อจำเป็น
- Fast Refresh จะไม่ทำการเปลี่ยนแปลงโค้ดที่รุกราน ดังนั้นจึงเชื่อถือได้เพียงพอที่จะเปิดใช้งานตามค่าเริ่มต้น
รีเฟรชอย่างรวดเร็ว
ทำปฏิกิริยาพื้นเมือง มีการรีโหลดแบบสดและรีโหลดแบบร้อนมาระยะหนึ่งแล้ว การโหลดซ้ำแบบสดจะโหลดแอปพลิเคชันทั้งหมดซ้ำเมื่อตรวจพบการเปลี่ยนแปลงรหัส สิ่งนี้จะสูญเสียตำแหน่งปัจจุบันของคุณภายในแอปพลิเคชัน แต่จะรับประกันว่าโค้ดไม่อยู่ในสถานะใช้งานไม่ได้ การรีโหลดแบบ Hot จะพยายาม "แก้ไข" เพียงแค่ความก้าวหน้าที่คุณทำ ซึ่งสามารถทำได้โดยไม่ต้องโหลดแอปพลิเคชันทั้งหมดซ้ำ ทำให้คุณเห็นความก้าวหน้าของคุณเร็วขึ้นมาก
การรีโหลดแบบ Hot Reload นั้นฟังดูดี แต่มันค่อนข้างบั๊กและใช้งานไม่ได้กับฟีเจอร์ React ในปัจจุบัน เช่น ส่วนประกอบการทำงานที่มีตะขอ
กลุ่ม React Native ได้สร้างฟีเจอร์ทั้งสองนี้ใหม่และรวมเข้ากับฟีเจอร์ Fast Reload ใหม่ โดยค่าเริ่มต้นจะเปิดใช้งานไว้ และจะทำสิ่งที่อาจเทียบได้กับการรีโหลดแบบ hot หากเป็นไปได้ และจะถอยกลับไปเป็นรีโหลดเต็มหากไม่แน่นอน
การอัพเกรดเป็น React Native 0.61
ในทำนองเดียวกัน สำหรับการอัปเกรด React Native ทั้งหมด ขอแนะนำให้คุณดูความแตกต่างสำหรับโปรเจ็กต์ที่เพิ่งสร้างใหม่ และใช้การเปลี่ยนแปลงเหล่านี้กับโปรเจ็กต์ของคุณเอง
อัปเดตเวอร์ชันการพึ่งพา
ขั้นตอนแรกคือการอัปเกรดเงื่อนไขใน package.json ของคุณและแนะนำเงื่อนไขเหล่านั้น โปรดจำไว้ว่า React Native แต่ละเวอร์ชันจะแนบมากับ React เวอร์ชันใดเวอร์ชันหนึ่ง ดังนั้นอย่าลืมอัปเดตด้วยเช่นกัน คุณควรตรวจสอบให้แน่ใจด้วยว่า react-test-renderer ตรงกับเวอร์ชัน React หากคุณใช้มันและอัพเกรดเวอร์ชัน metro-react-native-babel-preset และ Babel
การอัพเกรดโฟลว์
เริ่มต้นง่ายๆ เวอร์ชันของ Flow ที่ React Native ใช้ได้รับการรีเฟรชในเวอร์ชัน 0.61 นี่หมายความว่าคุณต้องแน่ใจว่าการพึ่งพาคอนเทนเนอร์ของโฟลว์ที่คุณตั้งไว้เป็น ^0.105.0 และคุณมีค่าใกล้เคียงกันใน [เวอร์ชัน] ไฟล์ .flowconfig ของคุณ
หากคุณใช้ Flow สำหรับการตรวจสอบประเภทในโปรเจ็กต์ของคุณ สิ่งนี้อาจทำให้เกิดข้อผิดพลาดเพิ่มเติมในโค้ดของคุณเอง คำแนะนำที่ดีที่สุดคือให้คุณตรวจสอบบันทึกการเปลี่ยนแปลงสำหรับเวอร์ชันในช่วง 0.98 และ 0.105 เพื่อรับรู้ถึงสาเหตุที่อาจเป็นสาเหตุ
หากคุณใช้ Typescript ในการตรวจสอบประเภทโค้ดของคุณ คุณสามารถกำจัดไฟล์ .flowconfig และการพึ่งพาโฟลว์ bin ได้จริงๆ และไม่ต้องสนใจความแตกต่างเล็กน้อยนี้
หากคุณไม่ได้ใช้ตัวตรวจสอบประเภท ขอแนะนำให้คุณลองดูการใช้งาน ตัวเลือกทั้งสองจะใช้ได้ อย่างไรก็ตาม ขอแนะนำให้ใช้ typescript