ส่วนประกอบที่ไม่สามารถควบคุมปฏิกิริยาได้หมายความว่าอย่างไร

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

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, รีแอคเวอร์ชัน 17.0.1, คอมพิวเตอร์ Dell G3

ส่วนประกอบที่ไม่สามารถควบคุมปฏิกิริยาได้หมายความว่าอย่างไร

องค์ประกอบที่ไม่สามารถควบคุมได้คืออะไร?

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

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

ตัวอย่าง

นำเข้า React, { Component } จาก 'react'; นำเข้า ReactDOM จาก 'react-dom'; class Demo1 ขยาย Component { render() { return ( <input /> //<ABC /> ) }}ReactDOM.render(<Demo1 />, document.getElementById('เนื้อหา'))

คำอธิบายของส่วนประกอบที่ไม่สามารถควบคุมได้

เนื่องจากส่วนประกอบที่ไม่สามารถควบคุมได้นั้นเป็นส่วนประกอบที่ไม่มีจุดตัดกับโลกภายนอก เราจึงไม่สามารถใช้ส่วนประกอบที่ไม่สามารถควบคุมได้อีกต่อไป คำตอบคือ ไม่ เราสามารถใช้ส่วนประกอบที่ไม่สามารถควบคุมได้ในบางกรณี

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

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

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

ขยายความรู้ของคุณ:

ส่วนประกอบควบคุมคืออะไร?

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

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

ตัวอย่าง

นำเข้า React, {ส่วนประกอบ} จาก 'react'; นำเข้า ReactDOM จาก 'react-dom'; คลาสอินพุตขยายส่วนประกอบ { ตัวสร้าง () { super (); this.state = {val:''}; =>{ la val = event.target.value; this.setState({val}) } render(){ return ( <div> <p>{this.state.val}</p> //<input type= "text" value='123' /> <input type="text" value={this.state.val} onChange={this.handleChange} /> //Input เป็นองค์ประกอบควบคุมที่ควบคุมโดยคุณสมบัติของวัตถุสถานะ </ div> ) }}ReactDOM.render(<อินพุต/>,window.app)

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

คำอธิบายของส่วนประกอบที่ถูกควบคุม

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

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

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

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