เจาะลึกการเรนเดอร์คอมโพเนนต์ใน React: มุมมองสำหรับนักพัฒนาทั่วโลก

ในโลกของการพัฒนา front-end ที่เปลี่ยนแปลงอย่างรวดเร็ว การทำความเข้าใจว่าคอมโพเนนต์ใน React ถูกเรนเดอร์อย่างไรถือเป็นพื้นฐานสำคัญในการสร้าง UI ที่มีประสิทธิภาพ ยืดหยุ่น และน่าสนใจ สำหรับนักพัฒนาทั่วโลก ไม่ว่าจะอยู่ที่ใดหรือใช้เทคโนโลยีหลักอะไร แนวทางแบบ declarative ของ React ในการจัดการ UI ถือเป็นกระบวนทัศน์ที่ทรงพลัง คู่มือฉบับสมบูรณ์นี้มีจุดมุ่งหมายเพื่อไขข้อข้องใจเกี่ยวกับความซับซ้อนของการเรนเดอร์คอมโพเนนต์ใน React โดยให้มุมมองระดับโลกเกี่ยวกับกลไกหลัก วัฏจักรชีวิต และเทคนิคการเพิ่มประสิทธิภาพ

หัวใจหลักของการเรนเดอร์ใน React: Declarative UI และ Virtual DOM

หัวใจหลักของ React คือการสนับสนุนสไตล์การเขียนโปรแกรมแบบ declarative แทนที่จะสั่งเบราว์เซอร์แบบ imperative ทีละขั้นตอนว่าต้องอัปเดต UI อย่างไร นักพัฒนาเพียงแค่อธิบายว่า UI ควรมีลักษณะอย่างไรใน state ที่กำหนด จากนั้น React จะรับคำอธิบายนี้ไปและอัปเดต Document Object Model (DOM) จริงในเบราว์เซอร์อย่างมีประสิทธิภาพ ธรรมชาติแบบ declarative นี้ช่วยให้การพัฒนา UI ที่ซับซ้อนง่ายขึ้นอย่างมาก ทำให้นักพัฒนาสามารถมุ่งเน้นไปที่สถานะสุดท้ายที่ต้องการ แทนที่จะต้องจัดการองค์ประกอบ UI อย่างละเอียด

เบื้องหลังความมหัศจรรย์ของการอัปเดต UI ที่มีประสิทธิภาพของ React คือการใช้ Virtual DOM ซึ่งเป็นตัวแทนของ DOM จริงที่อยู่ในหน่วยความจำและมีน้ำหนักเบา เมื่อ state หรือ props ของคอมโพเนนต์เปลี่ยนแปลง React จะไม่เข้าไปจัดการ DOM ของเบราว์เซอร์โดยตรง แต่จะสร้าง Virtual DOM tree ใหม่ขึ้นมาเพื่อแสดง UI ที่อัปเดตแล้ว จากนั้น tree ใหม่นี้จะถูกนำไปเปรียบเทียบกับ Virtual DOM tree ก่อนหน้าในกระบวนการที่เรียกว่า diffing

อัลกอริทึม diffing จะระบุชุดการเปลี่ยนแปลงที่น้อยที่สุดที่จำเป็นเพื่อทำให้ DOM จริงสอดคล้องกับ Virtual DOM ใหม่ กระบวนการนี้เรียกว่า reconciliation การอัปเดตเฉพาะส่วนของ DOM ที่เปลี่ยนแปลงไปจริง ๆ ช่วยให้ React ลดการจัดการ DOM โดยตรงซึ่งขึ้นชื่อว่าช้าและอาจทำให้เกิดปัญหาคอขวดด้านประสิทธิภาพ กระบวนการ reconciliation ที่มีประสิทธิภาพนี้เป็นรากฐานสำคัญของประสิทธิภาพของ React ซึ่งเป็นประโยชน์ต่อนักพัฒนาและผู้ใช้ทั่วโลก

ทำความเข้าใจวัฏจักรชีวิตของการเรนเดอร์คอมโพเนนต์

คอมโพเนนต์ของ React จะผ่านวัฏจักรชีวิต (lifecycle) ซึ่งเป็นชุดของเหตุการณ์หรือช่วงเวลาที่เกิดขึ้นตั้งแต่ตอนที่คอมโพเนนต์ถูกสร้างและแทรกลงใน DOM จนกระทั่งถูกลบออกไป การทำความเข้าใจวัฏจักรชีวิตนี้มีความสำคัญอย่างยิ่งต่อการจัดการพฤติกรรมของคอมโพเนนต์ การจัดการ side effects และการเพิ่มประสิทธิภาพ แม้ว่า class component จะมีวัฏจักรชีวิตที่ชัดเจนกว่า แต่ functional component ที่ใช้ Hooks ก็มีวิธีการที่ทันสมัยและมักจะเข้าใจง่ายกว่าเพื่อให้ได้ผลลัพธ์ที่คล้ายคลึงกัน

Mounting (การสร้างและติดตั้ง)

ช่วง Mounting คือช่วงที่คอมโพเนนต์ถูกสร้างและแทรกลงใน DOM เป็นครั้งแรก สำหรับ class component เมธอดหลักที่เกี่ยวข้องคือ:

• `constructor()`: เมธอดแรกที่ถูกเรียก ใช้สำหรับการกำหนดค่าเริ่มต้นของ state และการผูก event handlers นี่คือที่ที่คุณมักจะตั้งค่าข้อมูลเริ่มต้นสำหรับคอมโพเนนต์ของคุณ
• `static getDerivedStateFromProps(props, state)`: ถูกเรียกก่อน `render()` ใช้สำหรับอัปเดต state เพื่อตอบสนองต่อการเปลี่ยนแปลงของ props อย่างไรก็ตาม มักจะแนะนำให้หลีกเลี่ยงเมธอดนี้หากเป็นไปได้ โดยเลือกใช้การจัดการ state โดยตรงหรือเมธอด lifecycle อื่น ๆ แทน
• `render()`: เป็นเมธอดเดียวที่จำเป็นต้องมี โดยจะคืนค่า JSX ที่อธิบายว่า UI ควรมีหน้าตาเป็นอย่างไร
• `componentDidMount()`: ถูกเรียกทันทีหลังจากที่คอมโพเนนต์ถูก mount (แทรกลงใน DOM) นี่คือที่ที่เหมาะที่สุดในการทำ side effects เช่น การดึงข้อมูล การตั้งค่า subscriptions หรือการโต้ตอบกับ DOM APIs ของเบราว์เซอร์ ตัวอย่างเช่น การดึงข้อมูลจาก API endpoint ส่วนกลางมักจะเกิดขึ้นที่นี่

สำหรับ functional component ที่ใช้ Hooks นั้น `useEffect()` ที่มี dependency array ว่าง (`[]`) จะทำหน้าที่คล้ายกับ `componentDidMount()` ทำให้คุณสามารถรันโค้ดหลังจากเรนเดอร์ครั้งแรกและการอัปเดต DOM ได้

Updating (การอัปเดต)

ช่วง Updating จะเกิดขึ้นเมื่อ state หรือ props ของคอมโพเนนต์เปลี่ยนแปลง ซึ่งกระตุ้นให้เกิดการ re-render สำหรับ class component เมธอดที่เกี่ยวข้องมีดังนี้:

• `static getDerivedStateFromProps(props, state)`: ดังที่กล่าวไว้ก่อนหน้านี้ ใช้สำหรับสร้าง state จาก props
• `shouldComponentUpdate(nextProps, nextState)`: เมธอดนี้ช่วยให้คุณควบคุมได้ว่าคอมโพเนนต์จะ re-render หรือไม่ โดยปกติแล้วจะคืนค่า `true` ซึ่งหมายความว่าคอมโพเนนต์จะ re-render ทุกครั้งที่มีการเปลี่ยนแปลง state หรือ props การคืนค่า `false` สามารถป้องกันการ re-render ที่ไม่จำเป็นและปรับปรุงประสิทธิภาพได้
• `render()`: ถูกเรียกอีกครั้งเพื่อคืนค่า JSX ที่อัปเดตแล้ว
• `getSnapshotBeforeUpdate(prevProps, prevState)`: ถูกเรียกก่อนที่ DOM จะถูกอัปเดต ช่วยให้คุณสามารถเก็บข้อมูลบางอย่างจาก DOM (เช่น ตำแหน่งการเลื่อน) ก่อนที่มันอาจจะเปลี่ยนแปลงไป ค่าที่ส่งคืนจะถูกส่งต่อไปยัง `componentDidUpdate()`
• `componentDidUpdate(prevProps, prevState, snapshot)`: ถูกเรียกทันทีหลังจากที่คอมโพเนนต์อัปเดตและ DOM ถูก re-render นี่เป็นที่ที่ดีในการทำ side effects เพื่อตอบสนองต่อการเปลี่ยนแปลงของ props หรือ state เช่น การเรียก API ตามข้อมูลที่อัปเดต ควรระมัดระวังที่นี่เพื่อหลีกเลี่ยงการเกิด loop ไม่สิ้นสุดโดยการตรวจสอบให้แน่ใจว่ามีตรรกะเงื่อนไขเพื่อป้องกันการ re-render

ใน functional component ที่ใช้ Hooks การเปลี่ยนแปลงของ state ที่จัดการโดย `useState` หรือ `useReducer` หรือ props ที่ส่งลงมาซึ่งทำให้เกิดการ re-render จะกระตุ้นการทำงานของ `useEffect` callback เว้นแต่ว่า dependencies ของมันจะป้องกันไว้ Hooks อย่าง `useMemo` และ `useCallback` มีความสำคัญอย่างยิ่งในการเพิ่มประสิทธิภาพการอัปเดตโดยการ memoize ค่าและฟังก์ชัน เพื่อป้องกันการคำนวณซ้ำที่ไม่จำเป็น

Unmounting (การถอดถอน)

ช่วง Unmounting จะเกิดขึ้นเมื่อคอมโพเนนต์ถูกลบออกจาก DOM สำหรับ class component เมธอดหลักคือ:

• `componentWillUnmount()`: ถูกเรียกทันทีก่อนที่คอมโพเนนจะถูก unmount และทำลาย นี่คือที่สำหรับทำการ cleanup ที่จำเป็น เช่น การล้าง timers การยกเลิก network requests หรือการลบ event listeners เพื่อป้องกันหน่วยความจำรั่วไหล (memory leaks) ลองนึกภาพแอปพลิเคชันแชทระดับโลก การ unmount คอมโพเนนต์อาจเกี่ยวข้องกับการตัดการเชื่อมต่อจากเซิร์ฟเวอร์ WebSocket

ใน functional component ฟังก์ชัน cleanup ที่ถูกส่งคืนจาก `useEffect` ก็ทำหน้าที่เดียวกัน ตัวอย่างเช่น หากคุณตั้งค่า timer ใน `useEffect` คุณจะต้องส่งคืนฟังก์ชันจาก `useEffect` เพื่อล้าง timer นั้น

Keys: สิ่งจำเป็นสำหรับการเรนเดอร์รายการอย่างมีประสิทธิภาพ

เมื่อทำการเรนเดอร์รายการของคอมโพเนนต์ เช่น รายการสินค้าจากแพลตฟอร์มอีคอมเมิร์ซระหว่างประเทศ หรือรายชื่อผู้ใช้จากเครื่องมือทำงานร่วมกันระดับโลก การให้ key prop ที่ไม่ซ้ำกันและคงที่เป็นสิ่งสำคัญอย่างยิ่งสำหรับแต่ละรายการ Keys ช่วยให้ React ระบุได้ว่ารายการใดมีการเปลี่ยนแปลง ถูกเพิ่ม หรือถูกลบ หากไม่มี keys React จะต้อง re-render ทั้งรายการทุกครั้งที่มีการอัปเดต ซึ่งจะทำให้ประสิทธิภาพลดลงอย่างมาก

แนวทางปฏิบัติที่ดีที่สุดสำหรับ keys:

• Keys ควรไม่ซ้ำกันในหมู่พี่น้อง (siblings)
• Keys ควรมีความเสถียร ไม่ควรเปลี่ยนแปลงระหว่างการเรนเดอร์
• หลีกเลี่ยงการใช้ index ของ array เป็น keys หากรายการสามารถจัดลำดับใหม่ กรอง หรือมีรายการที่สามารถเพิ่มเข้าที่ตอนต้นหรือตอนกลางของรายการได้ นี่เป็นเพราะ index จะเปลี่ยนไปหากลำดับของรายการเปลี่ยน ซึ่งจะทำให้อัลกอริทึม reconciliation ของ React สับสน
• ควรใช้ ID ที่ไม่ซ้ำกันจากข้อมูลของคุณ (เช่น `product.id`, `user.uuid`) เป็น keys

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

การเพิ่มประสิทธิภาพการเรนเดอร์ของ React

ประสิทธิภาพเป็นข้อกังวลสากลสำหรับนักพัฒนาทั่วโลก React มีเครื่องมือและเทคนิคหลายอย่างเพื่อเพิ่มประสิทธิภาพการเรนเดอร์:

1. `React.memo()` สำหรับ Functional Components

React.memo() เป็น higher-order component ที่ทำการ memoize functional component ของคุณ มันจะทำการเปรียบเทียบ props ของคอมโพเนนต์แบบตื้น (shallow comparison) หาก props ไม่มีการเปลี่ยนแปลง React จะข้ามการ re-render คอมโพเนนต์นั้นและใช้ผลลัพธ์การเรนเดอร์ครั้งล่าสุดซ้ำ ซึ่งคล้ายกับ `shouldComponentUpdate` ใน class component แต่โดยทั่วไปจะใช้สำหรับ functional component

ตัวอย่าง:

            
const ProductCard = React.memo(function ProductCard(props) {
  /* render using props */
});

            

              
                Copy
              
            
          

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

2. `useMemo()` และ `useCallback()` Hooks

• `useMemo()`: Memoize ผลลัพธ์ของการคำนวณ โดยรับฟังก์ชันและ dependency array ฟังก์ชันจะถูกเรียกใช้ใหม่ก็ต่อเมื่อ dependency ตัวใดตัวหนึ่งมีการเปลี่ยนแปลง สิ่งนี้มีประโยชน์สำหรับการคำนวณที่มีค่าใช้จ่ายสูง หรือสำหรับการ memoize อ็อบเจกต์หรืออาร์เรย์ที่ส่งเป็น props ไปยังคอมโพเนนต์ลูก
• `useCallback()`: Memoize ฟังก์ชัน โดยรับฟังก์ชันและ dependency array มันจะคืนค่าฟังก์ชัน callback เวอร์ชันที่ memoize แล้ว ซึ่งจะเปลี่ยนแปลงก็ต่อเมื่อ dependency ตัวใดตัวหนึ่งมีการเปลี่ยนแปลง สิ่งนี้สำคัญอย่างยิ่งในการป้องกันการ re-render ที่ไม่จำเป็นของคอมโพเนนต์ลูกที่รับฟังก์ชันเป็น props โดยเฉพาะอย่างยิ่งเมื่อฟังก์ชันเหล่านั้นถูกกำหนดไว้ภายในคอมโพเนนต์แม่

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

3. Lazy Loading และ Code Splitting

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

React มี React.lazy() และ Suspense เพื่อให้สามารถทำ code splitting ได้อย่างง่ายดาย:

• `React.lazy()`: ให้คุณเรนเดอร์คอมโพเนนต์ที่ import แบบไดนามิกเหมือนกับคอมโพเนนต์ปกติ
• `Suspense`: ให้คุณระบุตัวบ่งชี้การโหลด (fallback UI) ในขณะที่ lazy component กำลังถูกโหลด

ตัวอย่าง:

            
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Loading...
}>