溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“從原生JavaScript到React實例分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“從原生JavaScript到React實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
在 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>
為此，我們將創建一個h2元素，該元素將插入到 HTML 頁面的正文中。
// The document object is accessible since it is in the global scope
const h2Element = document.createElement('h2');
h2Element.setAttribute('class', 'title');
const textElement = document.createTextNode('I am Groot');
h2Element.appendChild(textElement);
// document.getElementById('app') will retrieve the div with the identifier app
document.getElementById('app').appendChild(element);上面的代碼首先創建一個新屬性，然后向該元素h2添加一個class帶有值為title的新屬性。 它還創建一個簡單的文本節點并將文本 'I am Groot' 添加為元素h2的子元素。最后，它使用 HTML 文檔將 h2 的標簽添加到 div 中。app 執行此代碼后，生成的 HTML 文檔將如下所示：
<!DOCTYPE html> <html> <head> <script src="app.js"></script> </head> <body> <div id="app"> <h2 class="title">I am Groot</h2> </div> </body> </html>
借助 DOM，我們還可以通過 className 屬性直接操作元素的類屬性（因為名稱 class 是 JavaScript 中的保留關鍵字）。因此，以下代碼將產生完全相同的結果。
const h2Element = document.createElement('h2');
// h2Element.setAttribute('class', 'title');
h2Element.className = 'title';
const textElement = document.createTextNode('I am Groot');
h2Element.appendChild(textElement);
document.getElementById('app').appendChild(element);大多數 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 = 'h2';
const props = { className: 'title' };
const children = 'I am Groot';
const element = React.createElement(name, props, children);React.createElement 也可以接受包含要創建的元素的所有子元素的數組。
import React from 'react';
const name = 'h2';
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('h2', 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('h2', ...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('h2', props);
ReactDOM.render(element, document.getElementById('app'));
</script>
</head>
<body>
<div id="app" />
</body>
</html>雖然我們可以使用這種方法創建 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('h2', props, children);或使用 JSX 聲明：
import React from 'react'; const element = <h2 className="title">I am Groot</h2>;
由于 JSX 代碼將使用 轉換為調用 React.createElement，因此您需要導入 React，即使它似乎沒有被使用。
使用 JSX，您可以非常快速地以聲明方式創建大部分 DOM，而 React 只會看到對React.createElement. 由于 JSX 元素只是對 的調用 React.createElement，因此 children 仍然是常規屬性。因此，您也可以像這樣編寫前面的示例：
import React from 'react'; const element = <h2 className="title" children="I am Groot"/>;
借助 JSX，您可以通過花括號訪問變量：
import React from 'react';
const title = 'title';
const text = 'I am Groot';
const element = <h2 className={title} children={text}/>;當然，我們也可以將變量命名為我們想要操作的屬性
import React from 'react';
const className = 'title';
const children = 'I am Groot';
const element = <h2 className={className} children={children}/>;這將允許我們使用擴展語法來獲得更簡潔的代碼
import React from 'react';
const props = {
className: 'title',
children: ['I am Groot']
};
const element = <h2 {...props}/>;最后，我們可以像以前一樣在 DOM 中渲染這個元素 React.createElement。
import React from 'react';
import ReactDOM from 'react-dom';
const props = {
className: 'title',
children: ['I am Groot']
};
ReactDOM.render(<h2 {...props}/>, document.getElementById('app'));讀到這里，這篇“從原生JavaScript到React實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
