欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

從原生JavaScript到React深入理解

 更新時間：2022年07月22日 14:35:04   作者：Yujiaao  
這篇文章主要為大家介紹了從原生JavaScript到React深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

從頭開始理解 React

作者：Stéphane Bégaudeau

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

React 是一個用于構(gòu)建用戶界面的 JavaScript 框架。它可用于通過動態(tài)操作頁面內(nèi)容來創(chuàng)建 JavaScript 應(yīng)用程序。瀏覽器已經(jīng)提供了在頁面中創(chuàng)建元素的 API，即 DOM，所以新手可能想知道 React 帶來了什么以及它與 DOM 的關(guān)系。

原生 JavaScript 和 DOM

在 JavaScript 中，就像在大多數(shù)編程語言中一樣，您將可以訪問具有各種對象和函數(shù)的全局范圍，您可以操縱這些對象和函數(shù)來構(gòu)建您的應(yīng)用程序。在 Web 環(huán)境中運行的 JavaScript 應(yīng)用程序中，您將有權(quán)訪問文檔對象模型 (DOM) API。如果您在基于節(jié)點的應(yīng)用程序中使用 JavaScript，您將無法訪問 DOM，但您可以導(dǎo)入替代實現(xiàn)，例如JSDOM。

DOM 是一個簡單的 API，可讓您以幾乎任何您想要的方式操作頁面的 HTML 文檔。由于全局document 對象，您可以開始使用它。

從 document 這里開始，您可以輕松地創(chuàng)建新元素、修改它們的屬性，甚至將它們添加為其他元素的子元素。多虧了 DOM，您可以通過編程方式創(chuàng)建任何 HTML 文檔，即使這樣做會非常冗長。

在下面的示例中，我們將以編程方式在 HTML 文檔中創(chuàng)建一個簡單的標(biāo)題。

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

為此，我們將創(chuàng)建一個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);

上面的代碼首先創(chuàng)建一個新屬性，然后向該元素h1添加一個class帶有值為title的新屬性。 它還創(chuàng)建一個簡單的文本節(jié)點并將文本 'I am Groot' 添加為元素h1的子元素。最后，它使用 HTML 文檔將 h1 的標(biāo)簽添加到 div 中。app 執(zhí)行此代碼后，生成的 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 中的保留關(guān)鍵字）。因此，以下代碼將產(chǎn)生完全相同的結(jié)果。

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 的基礎(chǔ)

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

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

要使用 React 操作 DOM，您將需要兩個依賴項 React 和 ReactDOM. React.createElement將讓您創(chuàng)建一個廉價且快速的數(shù)據(jù)結(jié)構(gòu)，稱為虛擬 DOM，代表您的用戶界面的結(jié)構(gòu)。ReactDOM將在您的 Web 應(yīng)用程序的真實 DOM 中呈現(xiàn)這個虛擬 DOM。

React.createElement將需要三個參數(shù)來創(chuàng)建虛擬 DOM 的元素：

  • 要創(chuàng)建的元素的名稱
  • 它的屬性
  • 它的孩子
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 也可以接受包含要創(chuàng)建的元素的所有子元素的數(shù)組。

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

參數(shù) children 也是元素的常規(guī)屬性，因此它可以是 props 對象的一部分。

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

為了在 DOM 中渲染這個元素，我們需要選擇它在 DOM 中的渲染位置，在我們的例子中是div帶有標(biāo)識符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 一起使用來進(jìn)行測試。這樣的配置應(yīng)該只用于簡單的測試，因為它們沒有像生產(chǎn)構(gòu)建那樣優(yōu)化。在這種特定情況下，應(yīng)刪除 和 的導(dǎo)入（此處均作為全局變量公開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>

咱老百姓也能學(xué)會的 JSX

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

預(yù)處理器使用 JSX 在構(gòu)建期間將其轉(zhuǎn)換為常規(guī) JavaScript。一個常規(guī)的 React 項目使用預(yù)處理器來將 JSX 代碼轉(zhuǎn)換為對 React.createElement. 因此，JSX 永遠(yuǎn)不會被 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 代碼將使用 轉(zhuǎn)換為調(diào)用 React.createElement，因此您需要導(dǎo)入 React，即使它似乎沒有被使用。

使用 JSX，您可以非常快速地以聲明方式創(chuàng)建大部分 DOM，而 React 只會看到對React.createElement. 由于 JSX 元素只是對 的調(diào)用 React.createElement，因此 children 仍然是常規(guī)屬性。因此，您也可以像這樣編寫前面的示例：

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;;

當(dāng)然，我們也可以將變量命名為我們想要操作的屬性

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'));

現(xiàn)在我們已經(jīng)使用 JSX 通過 React 渲染了我們的第一塊虛擬 DOM，我們準(zhǔn)備好看看如何使用 React 構(gòu)建一個基本的應(yīng)用程序。

奔跑吧，去用 React 組件開發(fā)更多動態(tài)代碼。

以上就是從原生JavaScript到React深入理解的詳細(xì)內(nèi)容，更多關(guān)于原生JavaScript到React的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論