ดูเหมือนว่าเรามีกรณีการใช้งานที่สมบูรณ์แบบสำหรับการใช้ Context API ใหม่ของ React!
มาดำดิ่งกัน
ก่อนอื่น เราต้องติดตั้งแพ็คเกจที่จำเป็น เนื่องจากใน React Native 0.59 NetInfo โมดูลอยู่ในแพ็คเกจแยกต่างหาก จำเป็นต้องมี React 16.6 หรือใหม่กว่า เนื่องจากช่วยให้บริบทพร้อมใช้งานภายนอกวิธีการเรนเดอร์ ค่อนข้างมีประโยชน์ เนื่องจากทำให้เรามีความยืดหยุ่นมากขึ้นในการใช้บริบทนี้
ฉันจะไม่รบกวนคุณในการตั้งค่าแอป React Native และสมมติว่าคุณมีแอปอยู่แล้ว
มาติดตั้ง NetInfo กัน แพ็คเกจ:
npm install @react-native-community/netinfo --save
เมื่อติดตั้งแล้ว เราสามารถสร้างส่วนประกอบของเราได้
การสร้างผู้ให้บริการบริบท
มาตั้งค่า <NetworkProvide กัน r> ส่วนประกอบ ส่วนประกอบนี้ส่งสถานะการเชื่อมต่อของเราไปยังส่วนประกอบลูกทั้งหมดของเรา:
ดังที่แสดงไว้ข้างต้น เราเพียงแค่ฟัง connectionChange เหตุการณ์ เหตุการณ์นั้นส่งคืน true เมื่อมีการเชื่อมต่ออินเทอร์เน็ตที่ใช้งานได้หรือ false เมื่อผู้ใช้ไม่มีการเชื่อมต่ออินเทอร์เน็ตที่ใช้งานได้ เราอัปเดตสถานะเมื่อสถานะการเชื่อมต่อเปลี่ยนแปลง
ทันทีที่เราอัปเดตสถานะ บริบทในแผนผังส่วนประกอบของเราจะเปลี่ยนไป ดังนั้นทุกองค์ประกอบจึงสามารถเข้าถึง isConnected ที่อัปเดตแล้ว ค่า คล้ายกับ Redux แต่มีโค้ดสำเร็จรูปน้อยกว่า
การล้อมผู้ให้บริการบริบท
เพื่อให้ Context API ของ React ทำงานได้ เราจำเป็นต้องรวม <NetworkProvide นี้ r> องค์ประกอบที่เราเพิ่งสร้างขึ้นโดยมีองค์ประกอบอื่นๆ ของเรา เช่น:
โดยการทำเช่นนี้ เราได้สร้าง context มีอยู่ในทุกองค์ประกอบภายใน <NetworkProvid เอ่อ>.
ขั้นตอนสุดท้ายคือการใช้บริบทในส่วนประกอบ เราใช้ <ExampleCompone nt> ในตอนนี้:
ตอนนี้ส่วนประกอบของเราใช้ Context API และ this.context.isConnected มีให้เราใช้
ขณะนี้เราสามารถแสดงข้อความถึงผู้ใช้ของเราใน <ExampleCompone nt> เมื่อการเชื่อมต่ออินเทอร์เน็ตของผู้ใช้ออนไลน์หรือออฟไลน์
ใน React เวอร์ชันก่อนหน้า context ไม่สามารถใช้งานได้นอกวิธีการเรนเดอร์ของคุณ ตั้งแต่ React 16.6.0 สามารถใช้งานได้โดยใช้ static contextType ดังแสดงในตัวอย่างด้านบน การใช้แบบนี้ทำให้เรามีความยืดหยุ่นมากขึ้นว่าเราต้องการใช้บริบทนั้นภายในส่วนประกอบของเราอย่างไร
บันทึกสุดท้าย
ดังนั้นเราจึงได้แสดงให้เห็นว่า Context API เหมาะสำหรับการตั้งค่าและใช้ค่าส่วนกลางเหล่านี้ในกรณีการใช้งานนี้ สถานะการเชื่อมต่อเป็นสิ่งสำคัญที่จะต้องมีให้ใช้งานได้ทั่วทั้งแอปของเรา เพื่อให้เราสามารถแจ้งให้ผู้ใช้ของเราทราบเมื่อการดำเนินการที่ต้องใช้การเชื่อมต่ออินเทอร์เน็ตที่ใช้งานได้กำลังจะล้มเหลว
เราสามารถทำเช่นเดียวกันกับ Redux ได้ แต่นั่นต้องใช้โค้ดมากกว่านี้ ลองใช้ React API ดั้งเดิมเมื่อเป็นไปได้ เนื่องจากจะจำกัดการขึ้นต่อกัน!
คุณสามารถดูส่วนสำคัญทั้งหมดได้ที่ GitHub ของฉัน
ขอบคุณที่อ่าน!
ฉันใช้ Medium มาหลายปีแล้ว แต่โดยทั่วไปก็แค่อ่านและเรียนรู้จากเนื้อหาของผู้อื่น การสอนแบบนี้ช่วยฉันได้มากในช่วงหลายปีที่ผ่านมา ดังนั้น การเขียนของฉันเองจึงเป็นวิธีการตอบแทนชุมชนนักพัฒนาที่ยอดเยี่ยมแห่งนี้!
บทช่วยสอนนี้ช่วยคุณได้หรือไม่ แจ้งให้เราทราบในความคิดเห็น ?
ได้รับคำติชมเพื่อปรับปรุงบทความของฉันหรือไม่ ฉันกระตือรือร้นที่จะปรับปรุงและแบ่งปันความรู้ของฉันมากขึ้น
เรียนรู้การเขียนโค้ดฟรี หลักสูตรโอเพ่นซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานในตำแหน่งนักพัฒนา เริ่มต้น
