ส่วนหน้าของเว็บ

การทำงานกับ React Context API

ปฏิกิริยา บริบท API เป็นฟีเจอร์ทดลองมาระยะหนึ่งแล้ว แต่ในเวอร์ชันของ React เท่านั้น 16.3.0 ปลอดภัยหรือไม่ที่จะใช้ในการผลิต บทความด้านล่างนี้จะแสดงแอปพลิเคชันเว็บสโตร์พื้นฐานสองแอปหนึ่งตัวสร้างด้วย Context API และอีกแอปหนึ่งที่ไม่มี

API ใหม่นี้ช่วยแก้ปัญหาสำคัญอย่างหนึ่ง - เสาเจาะ . แม้ว่าคุณจะไม่คุ้นเคยกับคำนี้ แต่หากคุณเคยใช้แอป React.js มาก่อนคำนี้อาจเกิดขึ้นกับคุณ การเจาะ Prop คือการประมวลผลการรับข้อมูลจากส่วนประกอบ A ไปยังส่วนประกอบ Z โดยส่งผ่านองค์ประกอบปฏิกิริยาตัวกลางหลายชั้น ส่วนประกอบจะได้รับอุปกรณ์ประกอบฉากทางอ้อมและ คุณ , ตอบสนองผู้พัฒนา จะต้องแน่ใจว่าทุกอย่างดำเนินไปอย่างถูกต้อง

ข้อใดคือแนวปฏิบัติในการออกแบบแอปที่ดี

มาดูกันว่าคุณจะจัดการกับปัญหาทั่วไปอย่างไรโดยไม่ใช้ React Context API

App.js

class App extends Component { state = { cars: { car001: { name: 'Honda', price: 100 }, car002: { name: 'BMW', price: 150 }, car003: { name: 'Mercedes', price: 200 } } }; incrementCarPrice = this.incrementCarPrice.bind(this); decrementCarPrice = this.decrementCarPrice.bind(this); incrementCarPrice(selectedID) { // a simple method that manipulates the state const cars = Object.assign({}, this.state.cars); cars[selectedID].price = cars[selectedID].price + 1; this.setState({ cars }); } decrementCarPrice(selectedID) { // a simple method that manipulates the state const cars = Object.assign({}, this.state.cars); cars[selectedID].price = cars[selectedID].price - 1; this.setState({ cars }); } render() { return (    ); } }

3. สร้างผู้บริโภค

เราจะต้องนำเข้าบริบทอีกครั้งและรวมองค์ประกอบของเราไว้ด้วยซึ่งแทรกไฟล์ บริบท อาร์กิวเมนต์ในส่วนประกอบ หลังจากนั้นก็ตรงไปตรงมา คุณใช้ บริบท แบบเดียวกับที่คุณใช้ อุปกรณ์ประกอบฉาก . มันมีคุณค่าทั้งหมดที่เราแบ่งปันใน MyProducer เราแค่ต้องใช้มัน!

Cars.js

const Cars = () => ( {context => ( Cars:
 {Object.keys(context.cars).map(carID => ( context.incrementPrice(carID)} decrementPrice={() => context.decrementPrice(carID)} /> ))} )} );

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

ProductList.js

const ProductList = () => ( Product list:
 {/* Other potential product categories which we will skip for this demo: */} {/* */} {/* */} {/* */} );

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

สิ่งนี้อาจเป็นจริงสำหรับพวกคุณที่ใช้ Redux สำหรับความสามารถของร้านค้าส่วนกลางเท่านั้น หากนั่นเป็นคุณลักษณะเดียวที่คุณใช้อยู่ตอนนี้คุณสามารถแทนที่ด้วย Context API และหลีกเลี่ยงการเจาะเสาโดยไม่ใช้ไลบรารีของบุคคลที่สาม

หากคุณสนใจในการวัดและเพิ่มประสิทธิภาพแอปพลิเคชัน React ของคุณโปรดอ่าน คำแนะนำในการเพิ่มประสิทธิภาพการตอบสนอง โดยเพื่อน ApeeScapeer William Wang

ทำความเข้าใจพื้นฐาน

ผู้บริโภคคืออะไร?

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

ReactJS เป็นไลบรารี front-end หรือ back-end?

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

ส่วนประกอบใน ReactJS คืออะไร?

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

สถานะของส่วนประกอบใน ReactJS คืออะไร?

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

คุณสามารถแบ่งปันสถานะของส่วนประกอบได้ไหม

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

คุณสามารถแชร์สถานะของคอมโพเนนต์กับองค์ประกอบหลักหรือพี่น้องใน React ได้หรือไม่

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

อุปกรณ์ทำปฏิกิริยาไม่เปลี่ยนรูปหรือไม่?

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

ผู้รับเหมาแปลงเงินเดือนเต็มเวลา

React Context API ทำให้ Redux ล้าสมัยหรือไม่

Context API ทำให้คุณลักษณะหนึ่งของ Redux ล้าสมัยนั่นคือร้านค้ากลาง หากคุณไม่ได้ใช้คุณสมบัติอื่น ๆ ของ Redux คุณสามารถแทนที่ไลบรารีทั้งหมดด้วยโซลูชันเนทีฟ (เพื่อตอบสนอง) ใหม่นี้

บริบทในการตอบสนองคืออะไร?

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