跳到内容

2

渲染用户界面 (UI)

要理解 React 的工作原理,我们首先需要对浏览器如何解释您的代码以创建(或渲染)用户界面 (UI) 有一个基本的了解。

当用户访问网页时,服务器会向浏览器返回一个 HTML 文件,该文件可能如下所示

Two side-by-side diagrams, left showing the HTML code, and right showing the DOM tree.

浏览器随后读取 HTML 并构建文档对象模型 (DOM)。

什么是 DOM?

DOM 是 HTML 元素的对象表示。它充当您的代码和用户界面之间的桥梁,并具有带有父子关系的树状结构。

Two side-by-side diagrams, left showing the DOM tree, and right showing the rendered UI.

您可以使用 DOM 方法和 JavaScript 来监听用户事件,并通过选择、添加、更新和删除用户界面中的特定元素来操作 DOM。DOM 操作不仅允许您定位特定元素,还可以更改它们的样式和内容。

在下一节中,您将学习如何使用 JavaScript 和 DOM 方法。

其他资源

您已完成本章2

您现在应该理解了 UI 在浏览器上是如何渲染的基本原理。

下一章

3:使用 JavaScript 更新 UI

了解开发人员如何使用 JavaScript 操作 DOM 并更新 UI。