React 基础：使用 JavaScript 更新用户界面

本章我们将使用 JavaScript 和 DOM 方法为项目添加一个 h1 标签，开始构建项目。

打开代码编辑器并新建一个 index.html 文件。在 HTML 文件中添加以下代码：

index.html

<html>
  <body>
    <div></div>
  </body>
</html>

然后为 div 指定一个唯一的 id，以便后续定位：

index.html

<html>
  <body>
    <div id="app"></div>
  </body>
</html>

若要在 HTML 文件中编写 JavaScript，请添加 script 标签：

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

现在，可以在 script 标签内使用 DOM 方法 getElementById() 通过 id 选择 <div> 元素：

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

继续使用 DOM 方法创建新的 <h1> 元素：

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // 选择 id 为 'app' 的 div 元素
      const app = document.getElementById('app');
 
      // 创建新的 H1 元素
      const header = document.createElement('h1');
 
      // 为 H1 元素创建文本节点
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
 
      // 将文本添加到 H1 元素
      header.appendChild(headerContent);
 
      // 将 H1 元素放入 div 中
      app.appendChild(header);
    </script>
  </body>
</html>

为确保一切正常，请在浏览器中打开 HTML 文件。你将看到显示 'Develop. Preview. Ship.' 的 h1 标签。

HTML 与 DOM 的区别

如果查看浏览器开发者工具中的 DOM 元素，会发现 DOM 包含了 <h1> 元素。页面的 DOM 与源代码（即你创建的原始 HTML 文件）是不同的。

这是因为 HTML 代表初始页面内容，而 DOM 代表更新后的页面内容，这些变化由你编写的 JavaScript 代码实现。

使用原生 JavaScript 更新 DOM 功能强大但代码冗长。你编写了所有这些代码只为添加一个包含文本的 <h1> 元素：

index.html

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

随着应用规模或团队扩大，这种方式会变得越来越难以维护。

采用这种方法时，开发者需要花费大量时间编写指令告诉计算机如何执行操作。但如果能直接描述想要展示的内容，而让计算机自行决定如何更新 DOM，岂不更好？

命令式编程与声明式编程

上述代码是典型的命令式编程范例——你编写了用户界面如何更新的具体步骤。但在构建用户界面时，声明式方法通常更受青睐，它能加速开发流程。开发者无需编写 DOM 操作方法，只需声明想要展示的内容（本例中是一个带文本的 h1 标签）。

换言之，命令式编程如同逐步指导厨师制作披萨，而声明式编程则像直接点单，无需关心披萨的制作过程。🍕

React 正是这样一个流行的声明式库，可用于构建用户界面。

React：声明式 UI 库

作为开发者，你只需告诉 React 期望的用户界面状态，React 会自行计算出如何更新 DOM 的具体步骤。

下一节我们将探索如何开始使用 React。

延伸阅读：

HTML 与 DOM 的区别

声明式 UI 与命令式的对比

使用 JavaScript 更新用户界面

HTML 与 DOM 的区别

命令式编程与声明式编程

React：声明式 UI 库

On this page