Giải thích cơ chế hoạt động của Virtual DOM trong React và tại sao việc lạm dụng State ở cấp độ Component cao nhất lại gây suy giảm hiệu năng render ứng dụng?

Question

Accepted Answer

Bản chất vấn đề Virtual DOM là một bản sao nhẹ (lightweight copy) của Real DOM được lưu trữ trên bộ nhớ RAM dưới dạng cấu trúc cây JavaScript object. Khi trạng thái (State) của một component thay đổi: React tạo ra một cây Virtual DOM mới. Thực hiện quá trình Diffing Algorithm (so sánh cây mới và cây cũ). Tính toán ra tập hợp các thay đổi tối thiểu (Reconciliation). Cập nhật các thay đổi đó lên Real DOM một cách đồng bộ hoặc bất đồng bộ. Tại sao lạm dụng State ở cấp cao gây chậm ứng dụng? Khi đặt State ở Component gốc (như App hoặc Layout chính), mỗi khi State đó thay đổi, toàn bộ cây component con bên dưới sẽ phải chạy lại hàm render (re-render), dù dữ liệu của chúng không thay đổi. Quá trình tính toán lại Virtual DOM cho một cây lớn tiêu tốn tài nguyên CPU không cần thiết. Giải pháp tối ưu Đẩy State xuống thấp nhất có thể (Lift State Down): Chỉ đặt State ở component thực sự cần nó. Sử dụng React.memo: Ngăn chặn component con re-render nếu props không thay đổi. import React, { useState, memo } from 'react'; // Component con được tối ưu với React.memo const ChildComponent = memo(({ title }) => { console.log('ChildComponent render lại'); return

{title}

; }); function ParentComponent() { const [count, setCount] = useState(0); const [text, setText] = useState('Tiêu đề tĩnh'); return (

{/* Khi click tăng count, ChildComponent KHÔNG bị re-render dù nằm trong Parent */}

); } Kinh nghiệm thực chiến Không nên bọc React.memo cho tất cả mọi component vì bản thân việc so sánh props cũng tốn chi phí. Chỉ áp dụng cho các component lớn, render phức tạp hoặc component con nhận nhiều props hàm/đối tượng.

Giải thích cơ chế hoạt động của Virtual DOM trong React và tại sao việc lạm dụng State ở cấp độ Component cao nhất lại gây suy giảm hiệu năng render ứng dụng?

Bản chất vấn đề

Mở Khóa Full Câu Trả Lời & Code Chuẩn Senior

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi React liên quan cùng chủ đề

Giải thích cơ chế hoạt động của Virtual DOM trong React và tại sao việc lạm dụng State ở cấp độ Component cao nhất lại gây suy giảm hiệu năng render ứng dụng?

Bản chất vấn đề

Đăng nhập để xem câu trả lời

Mở Khóa Full Câu Trả Lời & Code Chuẩn Senior

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi React liên quan cùng chủ đề