社區(qū)精選 |從原生 JavaScript 到 React
今天小編為大家?guī)淼氖巧鐓^(qū)作者 Yujiaao 的文章，在這篇文章他翻譯了一篇外文，可能會給新手一些解惑，例如React 帶來了什么以及它與 DOM 的關(guān)系。
讓我們一起來學(xué)習(xí)吧~
從頭開始理解 React
作者：Stéphane Bégaudeau于 2018 年 10 月 1 日
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)境中運(yùn)行的 JavaScript 應(yīng)用程序中，您將有權(quán)訪問文檔對象模型 (DOM) API。如果您在基于節(jié)點(diǎn)的應(yīng)用程序中使用 JavaScript，您將無法訪問 DOM，但您可以導(dǎo)入替代實(shí)現(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);
<!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 屬性直接操作元素的類屬性（因?yàn)槊Q 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);
大多數(shù) React 教程會讓你從直接使用 React 的所有奇跡開始。我們將采用另一種方法，因?yàn)槲覀儗木帉懸恍┠憧赡苡肋h(yuǎn)不會再編寫的 React 代碼開始，以便更好地理解 React 的工作方式。
React 的創(chuàng)建考慮了 Web 應(yīng)用場景，因此，在其核心，它的一些 API 感覺就像 DOM。為了說明這一點(diǎn)，我們將看一下最重要的 React API 之一，React.createElement.
要使用 React 操作 DOM，您將需要兩個依賴項(xiàng) React 和 ReactDOM. React.createElement將讓您創(chuàng)建一個廉價且快速的數(shù)據(jù)結(jié)構(gòu)，稱為虛擬 DOM，代表您的用戶界面的結(jié)構(gòu)。ReactDOM將在您的 Web 應(yīng)用程序的真實(shí) 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);
import React from 'react';
const name = 'h1';
const props = { className: 'title' };
const children = ['I am Groot'];
const element = React.createElement(name, props, children);
import React from 'react';
const props = {
className: 'title',
children: ['I am Groot']
};
const element = React.createElement('h1', props);
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'));
<!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
import React from 'react';
const props = { className: 'title' };
const children = ['I am Groot'];
const element = React.createElement('h1', props, children);
import React from 'react';
const element = <h1 className="title">I am Groot</h1>;
由于 JSX 代碼將使用 轉(zhuǎn)換為調(diào)用 React.createElement，因此您需要導(dǎo)入 React，即使它似乎沒有被使用。
import React from 'react';
const element = <h1 className="title" children="I am Groot"/>;
import React from 'react';
const title = 'title';
const text = 'I am Groot';
const element = <h1 className={title} children={text}/>;
import React from 'react';
const className = 'title';
const children = 'I am Groot';
const element = <h1 className={className} children={children}/>;
這將允許我們使用擴(kuò)展語法來獲得更簡潔的代碼
import React from 'react';
const props = {
className: 'title',
children: ['I am Groot']
};
const element = <h1 {...props}/>;
最后，我們可以像以前一樣在 DOM 中渲染這個元素 React.createElement。
import React from 'react';
import ReactDOM from 'react-dom';
const props = {
className: 'title',
children: ['I am Groot']
};
ReactDOM.render(<h1 {...props}/>, document.getElementById('app'));
SegmentFault 思否社區(qū)小編說
自 2022-07-01 起 SegmentFault 思否公眾號改版啦！之后將陸續(xù)推出新的欄目和大家見面?。ㄕ埵媚恳源絶?）
在「社區(qū)精選」欄目中，我們將為廣大開發(fā)者推薦來自 SegmentFault 思否開發(fā)者社區(qū)的優(yōu)質(zhì)技術(shù)文章，這些文章全部出自社區(qū)中充滿智慧的技術(shù)創(chuàng)作者哦!
希望通過這一欄目，大家可以共同學(xué)習(xí)技術(shù)干貨，GET 新技能和各種花式技術(shù)小 Tips。
歡迎越來越多的開發(fā)者加入創(chuàng)作者的行列，我們將持續(xù)甄選出社區(qū)中優(yōu)質(zhì)的內(nèi)容推介給更多人，讓閃閃發(fā)光的技術(shù)創(chuàng)作者們走到聚光燈下，被更多人認(rèn)識。
「社區(qū)精選」投稿郵箱：[email protected]
投稿請附上社區(qū)文章地址
