ในการโต้ตอบ องค์ประกอบคือหน่วยการสร้างที่เล็กที่สุด ไม่ใช่ DOM องค์ประกอบสามารถกำหนดได้ในโค้ดโดยใช้ jsx และไวยากรณ์คือ "const element =..."; องค์ประกอบไม่สามารถเปลี่ยนแปลงได้หลังจากถูกสร้างขึ้น ต้องการเปลี่ยน DOM คุณสามารถสร้างได้เฉพาะองค์ประกอบใหม่เท่านั้น
สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, รีแอคเวอร์ชัน 17.0.1, คอมพิวเตอร์ Dell G3
องค์ประกอบ
1.องค์ประกอบเป็นหน่วยการสร้างที่เล็กที่สุดในการตอบสนอง มันเป็นวัตถุ ไม่ใช่ DOM และต้นทุนในการสร้างค่อนข้างต่ำ
(1) โดยปกติแล้วเราใช้ JSX เพื่อกำหนดองค์ประกอบในโค้ด:
องค์ประกอบ const = <h1>สวัสดีชาวโลก</h1>;(2) ใช้ ReactDOM.render เพื่อเรนเดอร์
ReactDOM.render( องค์ประกอบ, document.getElementById('root') );2. เมื่อสร้าง Element แล้ว จะไม่สามารถเปลี่ยนแปลงได้ เหมือนกับเฟรมในภาพยนตร์ หากคุณต้องการเปลี่ยนการแสดงผลของ DOM คุณสามารถสร้างได้เฉพาะ Element ใหม่เท่านั้น
3. React จะเปรียบเทียบทั้งสององค์ประกอบก่อนและหลัง และอัปเดตเฉพาะเนื้อหาที่จำเป็นต้องอัปเดตเท่านั้น
ขยายความรู้ของคุณ:
DOM เสมือน
1. React ไม่ได้สร้างองค์ประกอบ DOM โดยตรง แต่สร้างวัตถุที่คล้ายกับโครงสร้าง DOM จากนั้น DOM จริงจะเรนเดอร์ตามโครงสร้างนี้ ซึ่งก็คือ React DOM
2. เมื่อมีการเปลี่ยนแปลง ให้สร้างออบเจ็กต์ใหม่ เปรียบเทียบกับโครงสร้างก่อนหน้า และบันทึกความแตกต่างระหว่างทั้งสอง คุณสามารถดูอัลกอริธึมความแตกต่างได้ที่นี่
3. จากนั้น DOM จะได้รับการอัปเดตตามความแตกต่างที่บันทึกไว้
ปฏิกิริยาองค์ประกอบ
1. 'DOM' เสมือน;
2. แก่นแท้เป็นวัตถุที่ไม่เปลี่ยนรูป
แอตทริบิวต์ประเภท: ถ้าเป็นสตริงเช่น 'h1' ก็แสดงถึงโหนด DOM และแอตทริบิวต์อุปกรณ์ประกอบฉากของมันมีไว้สำหรับแอตทริบิวต์ของโหนด DOM หากแอตทริบิวต์ประเภทเป็นส่วนประกอบที่แสดงถึง
ฟังก์ชั่นหรือคลาสมันแสดงถึงส่วนประกอบ
3. ReactElement ทั้งสองประเภทสามารถซ้อนกันและผสมกันเพื่ออธิบายแผนผัง DOM