การแสดงผลองค์ประกอบ

องค์ประกอบเป็นกลุ่มของหน่วยที่เล็กที่สุดที่ถูกสร้างใน React แอปพลิเคชั่น

องค์ประกอบแต่ละตัวจะบอกลักษณะสิ่งที่คุณต้องการจะเห็นบนหน้าจอ:

const element = <h1>Hello, world</h1>;

ต่างจากองค์ประกอบของ DOM ที่อยู่ในเบราเซอร์, องค์ประกอบของ React นั้นเป็นอ็อปเจคธรรมดา, และราคาถูกในการสร้าง, ตัว React DOM จะคอยจัดการปรับปรุง DOM ให้ตรงกับองค์ประกอบของ React

หมายเหตุ:

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

การแสดงผลองค์ประกอบลงใน DOM

สมมติว่ามี <div> อยู่ที่ไหนสักที่ในไฟล์ HTML ของคุณ:

<div id="root"></div>

เราเรียกสิ่งนี้ว่า “รูท” โหนด DOM เพราะทุกอย่างภายในนั้นจะถูกจัดการโดย React DOM

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

ในการแสดงผลองค์ประกอบของ React เข้าไปในรูทโหนด DOM ต้องส่งทั้งสองอย่างไปยังฟังก์ชั่น ReactDOM.render():

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

ทดลองบน Codepen

ผลลัพธ์คือมันจะแสดง “Hello, world” บนหน้า

การปรับปรุงการแสดงผลขององค์ประกอบ

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

ด้วยความรู้ของเราจนถึงตอนนี้, ทางเดียวที่จะปรับปรุง UI ได้คือสร้างองค์ประกอบใหม่, และส่งต่อไปยังฟังก์ชั่น ReactDOM.render()

ลองพิจารณาตัวอย่างนาฬิกาที่กำลังเดินอยู่นี้:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));}

setInterval(tick, 1000);

ทดลองบน Codepen

มันจะเรียกใช้ฟังก์ชั่น ReactDOM.render() ทุกวินาทีจากการตอบกลับของฟังก์ชั่น setInterval()

หมายเหตุ:

ในทางปฏิบัติ, แอป React ส่วนใหญ่จะเรียกใช้ฟังก์ชั่น ReactDOM.render() เพียงครั้งเดียวเท่านั้น ในหัวข้อต่อไปเราจะมาเรียนรู้ว่าการห่อหุ้มโค้ดไว้ใน สเตทฟูลคอมโพเนนท์ ทำอย่างไร มันจะเรียกใช้ฟังก์ชั่น ReactDOM.render() ทุกวินาทีจากการตอบกลับของฟังก์ชั่น setInterval()

หมายเหตุ:

ในทางปฏิบัติ, แอป React ส่วนใหญ่จะเรียกใช้ฟังก์ชั่น ReactDOM.render() เพียงครั้งเดียวเท่านั้น ในหัวข้อต่อไปเราจะมาเรียนรู้ว่าการห่อหุ้มโค้ดไว้ใน สเตทฟูลคอมโพเนนท์ ทำอย่างไร

เราขอแนะนำให้คุณอย่าข้ามหัวข้อเพราะว่าเนื้อหามันต่อเนื่องกัน

React จะปรับปรุงเฉพาะสิ่งที่จำเป็นเท่านั้น

React DOM จะเปรียบเทียบองค์ประกอบและลูก ๆ กับองค์ประกอบก่อนหน้า, และทำการปรับปรุง DOM เฉพาะส่วนที่จำเป็นเพื่อให้ DOM เข้าสู่สถานะที่ต้องการ

คุณสามารถพิสูจน์โดยการตรวจสอบ ตัวอย่างล่าสุด ด้วยเครื่องมือของเบราเซอร์:

ตัวตรวจสอบ DOM แสดงการปรับปรุงที่ละเอียด

แม้ว่าเราจะสร้างองค์ประกอบเพื่ออธิบาย UI ใหม่ทั้งหมดทุกครั้งที่นาฬิกาเดิน, แต่ว่าจะมีเฉพาะโหนดข้อความที่เนื้อหามีการเปลี่ยนแปลงเท่านั้นได้รับการปรับปรุงโดย React DOM

จากประสบการณ์ของเรา, การคิดว่า UI ควรจะเป็นอย่างไรเฉพาะช่วงเวลาใดเวลาหนึ่ง แทนการคิดว่าเมื่อเวลาผ่านไปจะเปลี่ยนมันเป็นอย่างไร จะสามารถกำจัดข้อผิดพลาดได้เยอะทีเดียว

Is this page useful?Edit this page