渲染使用者介面 (UI)

要理解 React 的工作原理,我們首先需要基本了解瀏覽器如何解讀你的程式碼來建立(或渲染)使用者介面 (UI)。

當使用者造訪網頁時,伺服器會返回一個 HTML 檔案給瀏覽器,內容可能如下:

左右並列的兩個圖表,左側顯示 HTML 程式碼,右側顯示 DOM 樹狀結構。

接著瀏覽器會讀取 HTML 並建構文件物件模型 (DOM)。

什麼是 DOM?

DOM 是 HTML 元素的物件表示法。它作為你的程式碼與使用者介面之間的橋樑,並具有父子關係的樹狀結構。

左右並列的兩個圖表,左側顯示 DOM 樹狀結構,右側顯示渲染後的使用者介面。

你可以使用 DOM 方法和 JavaScript 來監聽使用者事件,並透過操作 DOM 來選取、新增、更新和刪除使用者介面中的特定元素。DOM 操作不僅能讓你鎖定特定元素,還能改變它們的樣式和內容。

在下一節中,你將學習如何使用 JavaScript 和 DOM 方法。

延伸閱讀:

On this page