Bản chất của JSX & Mental Model Render trong React

Hiểu rõ JSX không phải HTML, cách React biên dịch JSX thành React.createElement và chu kỳ Render Phase vs Commit Phase.

Core Mental Model

UI trong React là một hàm thuần khiết của State: UI = f(State). Khi State đổi, React gọi hàm Component để tính toán cây Virtual DOM mới (Render Phase), sau đó chỉ cập nhật những Node DOM thực sự khác biệt lên trình duyệt (Commit Phase).

Key Takeaways & Principles

JSX là cú pháp mở rộng (Syntactic Sugar) của JavaScript, được Babel/SWC chuyển đổi thành các hàm React.createElement() hoặc jsxRuntime.

Component phải luôn giữ tính thuần khiết (Pure Function): cùng một đầu vào (props + state) luôn trả về cùng một JSX mà không gây side-effect trong thân hàm.

Render Phase diễn ra ngầm trong bộ nhớ (tính toán Virtual DOM), Commit Phase mới thực sự thao tác lên Real DOM của trình duyệt.

React Core Foundations

beginner

15 phút

#React Basics

#JSX

#Virtual DOM