從 JavaScript 到 React

1

2

3

4

5

6

7

8

9

使用 JavaScript 和 DOM 方法來更新 UI

讓我們一起看看怎麼使用 JavaScript 和 DOM 方法，首先我們加入一個 h1 標籤到你的專案。

打開程式編輯器並創建一個叫 index.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 方法來創建新元素，這裡我們使用一些 DOM 方法來創建一個新的 <h1> 元素：

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script type="text/javascript">
      // Select the div element with 'app' id
      const app = document.getElementById('app');

      // Create a new H1 element
      const header = document.createElement('h1');

      // Create a new text node for the H1 element
      const headerContent = document.createTextNode(
        'Develop. Preview. Ship. 🚀',
      );

      // Append the text to the H1 element
      header.appendChild(headerContent);

      // Place the H1 element inside the div
      app.appendChild(header);
    </script>
  </body>
</html>

為了確定我們現在做的都是正確的，在瀏覽器內打開 HTML 檔案，你將會看到一個 h1 標籤上寫著 'Develop. Preview. Ship. 🚀'。

HTML 與 DOM

如果你透過瀏覽器內的開發人員工具來查看 DOM 元素，你會發現 DOM 內包含了 <h1> 元素，與原始碼（你創建的 HTML 檔案）有些不同。

這是因為 HTML 代表 初始頁面內容，然而 DOM 代表 更新後的頁面內容，即藉由剛剛寫的那些 JavaScript 程式所更新後的結果。

藉由原生的 JavaScript 來更新 DOM 雖然功能強大，但程式碼上卻有點冗長，目前為止你只是為了要加入一個 <h1> 元素和一些文字，已經寫了這些程式碼了：

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

當專案或團隊增長時，這會讓建構一個應用變得非常有挑戰性。

透過這種方式，開發者會消耗大量時間去寫指令告訴電腦它該 如何（how） 去做事。那能不能只告訴電腦說你想要顯示 什麼（what），然後電腦就可以去理解該 如何（how） 去更新 DOM 呢？

命令式（Imperative） 與 宣告式（Declarative）編程

上述的程式是一個 命令式編程 的好範例，你一步一步告訴電腦該 如何（how） 去更新使用者介面，但我們通常傾向透過宣告式方法來加速開發過程。宣告式方法中，我們不需要寫 DOM 方法，而是專注於宣告我們想要顯示 什麼（what） 內容（在本文的例子中，即 h1 標籤和一些文字）。

換句話說， 命令式編程 像是告訴廚師該如何一步一步去做一個披薩； 宣告式編程 像是直接點一個披薩，我們不需要知道要做出披薩的每一步驟。🍕

其中一個有名的宣告式函式庫為 React，他可以用來幫助開發者建立使用者介面。

React: 一個宣告式 UI 函式庫

作為開發者，你可以單純告訴 React 你想在介面上顯示 什麼（what），React 就會幫你處理好 如何（how） 更新 DOM （即所需的步驟）。

在下一章節中，我們將帶你探索如何使用 React。

小試身手：

下面何者更偏向宣告式？

提交

其他資源：

本篇文章由warren30815

warren30815

貢獻翻譯。瞭解如何參與貢獻