從原生JavaScript到React深入理解

2022-07-22 18:01:03

從頭開始理解 React

作者：Stéphane Bégaudeau

翻譯原文 https://www.sbegaudeau.com/2018/10/01/from-vanilla-javascript-to-react.html

React 是一個用於構建使用者介面的 JavaScript 框架。它可用於通過動態操作頁面內容來建立 JavaScript 應用程式。瀏覽器已經提供了在頁面中建立元素的 API，即 DOM，所以新手可能想知道 React 帶來了什麼以及它與 DOM 的關係。

原生 JavaScript 和 DOM

在 JavaScript 中，就像在大多數程式語言中一樣，您將可以存取具有各種物件和函數的全域性範圍，您可以操縱這些物件和函數來構建您的應用程式。在 Web 環境中執行的 JavaScript 應用程式中，您將有權存取檔案物件模型 (DOM) API。如果您在基於節點的應用程式中使用 JavaScript，您將無法存取 DOM，但您可以匯入替代實現，例如JSDOM。

DOM 是一個簡單的 API，可讓您以幾乎任何您想要的方式操作頁面的 HTML 檔案。由於全域性document 物件，您可以開始使用它。

從 document 這裡開始，您可以輕鬆地建立新元素、修改它們的屬性，甚至將它們新增為其他元素的子元素。多虧了 DOM，您可以通過程式設計方式建立任何 HTML 檔案，即使這樣做會非常冗長。

在下面的範例中，我們將以程式設計方式在 HTML 檔案中建立一個簡單的標題。

<!DOCTYPE html>
<html>
  <head>
    <script src="app.js"></script>
  </head>
  <body>
    <div id="app" />
  </body>
</html>

為此，我們將建立一個h1元素，該元素將插入到 HTML 頁面的正文中。

// The document object is accessible since it is in the global scope
const h1Element = document.createElement('h1');
h1Element.setAttribute('class', 'title');
const textElement = document.createTextNode('I am Groot');
h1Element.appendChild(textElement);
// document.getElementById('app') will retrieve the div with the identifier app
document.getElementById('app').appendChild(element);

上面的程式碼首先建立一個新屬性，然後向該元素h1新增一個class帶有值為title的新屬性。它還建立一個簡單的文位元組點並將文字 'I am Groot' 新增為元素h1的子元素。最後，它使用 HTML 檔案將 h1 的標籤新增到 div 中。app 執行此程式碼後，生成的 HTML 檔案將如下所示：

<!DOCTYPE html>
<html>
  <head>
    <script src="app.js"></script>
  </head>
  <body>
    <div id="app">
      <h1 class="title">I am Groot</h1>
    </div>
  </body>
</html>

藉助 DOM，我們還可以通過 className 屬性直接操作元素的類屬性（因為名稱 class 是 JavaScript 中的保留關鍵字）。因此，以下程式碼將產生完全相同的結果。

const h1Element = document.createElement('h1');
// h1Element.setAttribute('class', 'title');
h1Element.className = 'title';
const textElement = document.createTextNode('I am Groot');
h1Element.appendChild(textElement);
document.getElementById('app').appendChild(element);

React 的基礎

大多數 React 教學會讓你從直接使用 React 的所有奇蹟開始。我們將採用另一種方法，因為我們將從編寫一些你可能永遠不會再編寫的 React 程式碼開始，以便更好地理解 React 的工作方式。

React 的建立考慮了 Web 應用場景，因此，在其核心，它的一些 API 感覺就像 DOM。為了說明這一點，我們將看一下最重要的 React API 之一，React.createElement.

要使用 React 操作 DOM，您將需要兩個依賴項 React 和 ReactDOM. React.createElement將讓您建立一個廉價且快速的資料結構，稱為虛擬 DOM，代表您的使用者介面的結構。ReactDOM將在您的 Web 應用程式的真實 DOM 中呈現這個虛擬 DOM。

React.createElement將需要三個引數來建立虛擬 DOM 的元素：

要建立的元素的名稱
它的屬性
它的孩子

import React from 'react';
const name = 'h1';
const props = { className: 'title' };
const children = 'I am Groot';
const element = React.createElement(name, props, children);

React.createElement 也可以接受包含要建立的元素的所有子元素的陣列。

import React from 'react';
const name = 'h1';
const props = { className: 'title' };
const children = ['I am Groot'];
const element = React.createElement(name, props, children);

引數 children 也是元素的常規屬性，因此它可以是 props 物件的一部分。

import React from 'react';
const props = {
  className: 'title',
  children: ['I am Groot']
};
const element = React.createElement('h1', props);

為了在 DOM 中渲染這個元素，我們需要選擇它在 DOM 中的渲染位置，在我們的例子中是div帶有識別符號app並告訴 ReactDOM 渲染它。

import React from 'react';
import ReactDOM from 'react-dom';
const props = {
  className: 'title',
  children: ['I am Groot']
};
const element = React.createElement('h1', ...props);
ReactDOM.render(element, document.getElementById('app'));

此處顯示的所有程式碼範例都可以通過將它們與未打包版本的 React 和 Babel 一起使用來進行測試。這樣的設定應該只用於簡單的測試，因為它們沒有像生產構建那樣優化。在這種特定情況下，應刪除和的匯入（此處均作為全域性變數公開react）。react-dom

<!DOCTYPE html>
<html>
  <head>
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
    const props = {
      className: 'title',
      children: ['I am Groot']
    };
    const element = React.createElement('h1', props);
    ReactDOM.render(element, document.getElementById('app'));
    </script>
  </head>
  <body>
    <div id="app" />
  </body>
</html>

咱老百姓也能學會的 JSX

雖然我們可以使用這種方法建立 Web 應用程式的所有頁面，但它仍然非常冗長。為了使操作 DOM 變得容易，React 提供了一種名為JSX的簡單而強大的語言。

前處理器使用 JSX 在構建期間將其轉換為常規 JavaScript。一個常規的 React 專案使用前處理器來將 JSX 程式碼轉換為對 React.createElement. 因此，JSX 永遠不會被 React 直接解釋，你可以在沒有一行 JSX 的情況下使用 React。因此，下面的兩段程式碼完全相同。首先，以程式設計方式使用 React：

import React from 'react';
const props = { className: 'title' };
const children = ['I am Groot'];
const element = React.createElement('h1', props, children);

或使用 JSX 宣告：

import React from 'react';
const element = &lt;h1 className="title"&gt;I am Groot&lt;/h1&gt;;

由於 JSX 程式碼將使用轉換為呼叫 React.createElement，因此您需要匯入 React，即使它似乎沒有被使用。

使用 JSX，您可以非常快速地以宣告方式建立大部分 DOM，而 React 只會看到對React.createElement. 由於 JSX 元素只是對的呼叫 React.createElement，因此 children 仍然是常規屬性。因此，您也可以像這樣編寫前面的範例：

import React from 'react';
const element = &lt;h1 className="title" children="I am Groot"/&gt;;

藉助 JSX，您可以通過花括號存取變數：

import React from 'react';
const title = 'title';
const text = 'I am Groot';
const element = &lt;h1 className={title} children={text}/&gt;;

當然，我們也可以將變數命名為我們想要操作的屬性

import React from 'react';
const className = 'title';
const children = 'I am Groot';
const element = &lt;h1 className={className} children={children}/&gt;;

這將允許我們使用擴充套件語法來獲得更簡潔的程式碼

import React from 'react';
const props = {
  className: 'title',
  children: ['I am Groot']
};
const element = &lt;h1 {...props}/&gt;;

最後，我們可以像以前一樣在 DOM 中渲染這個元素 React.createElement。

import React from 'react';
import ReactDOM from 'react-dom';
const props = {
  className: 'title',
  children: ['I am Groot']
};
ReactDOM.render(&lt;h1 {...props}/&gt;, document.getElementById('app'));

現在我們已經使用 JSX 通過 React 渲染了我們的第一塊虛擬 DOM，我們準備好看看如何使用 React 構建一個基本的應用程式。

奔跑吧，去用 React 元件開發更多動態程式碼。

以上就是從原生JavaScript到React深入理解的詳細內容，更多關於原生JavaScript到React的資料請關注it145.com其它相關文章！

從原生JavaScript到React深入理解

目錄

從頭開始理解 React

原生 JavaScript 和 DOM

React 的基礎

咱老百姓也能學會的 JSX

熱門文章