什么是 ReactJS，它可以用來(lái)做什么？
如果您想為您的 Web 應(yīng)用程序創(chuàng)建快速、動(dòng)態(tài)的用戶界面，那么您需要學(xué)習(xí)如何使用 ReactJS。
React 是一個(gè)客戶端 JavaScript 庫(kù)，這意味著它在瀏覽器中的客戶端/用戶機(jī)器上運(yùn)行，而不是在服務(wù)器上運(yùn)行。
它由科技巨頭 Facebook 于 2011 年創(chuàng)建。React 庫(kù)用于構(gòu)建動(dòng)態(tài)用戶界面，并通過(guò)將用戶界面的各個(gè)方面分離為所謂的“組件”來(lái)進(jìn)行操作。
在本教程文章中，您將了解有關(guān) React 及其組件的所有知識(shí)。
什么是 ReactJS？
React（也稱為 ReactJS）是一個(gè)開源 JavaScript 庫(kù)，通常被錯(cuò)誤地稱為框架。這是因?yàn)?React 是 AngularJS 和 VueJS 等頂級(jí) JavaScript 框架的直接競(jìng)爭(zhēng)對(duì)手。
React 是一個(gè)庫(kù)，因?yàn)樗谄渌囟ㄓ诳蚣艿墓δ苤袥]有路由機(jī)制。但是，可以安裝一些工具，例如 react-router 并與該庫(kù)一起使用以實(shí)現(xiàn)框架功能。
與 jQuery 等語(yǔ)言中的其他庫(kù)相比，React 與 Angular/Vue 等框架的關(guān)系更密切。
使用 ReactJS 有什么好處？
許多開發(fā)人員出于多種不同的原因使用 React。有些人使用它是因?yàn)樗乃俣群托阅埽硪恍┤耸褂盟皇且驗(yàn)樗苁軞g迎。但是，所有開發(fā)人員都可以欣賞使用該框架的三個(gè)主要好處。
- 它允許您使用所謂的具有狀態(tài)和數(shù)據(jù)的“可重用組件”來(lái)構(gòu)建您的界面。
- 它使用允許用戶編寫動(dòng)態(tài) HTML 的 JavaScript 語(yǔ)法擴(kuò)展 (JSX)。
- 它使用虛擬文檔對(duì)象模型 (VDOM)，它允許開發(fā)人員更新網(wǎng)頁(yè)的特定部分，而無(wú)需重新加載頁(yè)面。
什么是 ReactJS 組件？
React 將用戶界面的每個(gè)部分都視為一個(gè)組件。組件具有狀態(tài)、方法和功能。
它們?cè)试S開發(fā)人員將用戶界面分成特定的部分，這些部分很容易組合以創(chuàng)建復(fù)雜的用戶界面。因此，如果要?jiǎng)?chuàng)建客戶經(jīng)理，用戶界面的一個(gè)組件可以專門用于添加新客戶，而同一用戶界面的另一個(gè)組件可以專門用于顯示客戶列表。
在最簡(jiǎn)單的形式中，組件是 JavaScript 類或函數(shù)。它們接受稱為“道具”的輸入值，并以 React 元素的形式返回用戶界面的特定方面。對(duì)于一些開發(fā)人員來(lái)說(shuō)，將組件定義為函數(shù)比將其定義為類更簡(jiǎn)單；但是，在 React 中使用任何一種方法都可以實(shí)現(xiàn)相同的輸出。
使用函數(shù)示例創(chuàng)建組件
function Customer() {
return (
<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: Wilsonp@email.com</li>
<li>Balance: $0.00</li>
</ul>
</div>
);
}
export default Customer;
使用類示例創(chuàng)建組件
import React from 'react';
class Customer extends React.Component {
render() {
return (
<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: Wilsonp@email.com</li>
<li>Balance: $0.00</li>
</ul>
</div>
);
}
}
export default Customer;
正如您從上面的示例中看到的那樣，當(dāng)您使用類創(chuàng)建組件時(shí)會(huì)發(fā)生更多事情。首先要注意的是，在創(chuàng)建類組件時(shí)必須使用render()函數(shù)。
如您所知，您不能直接從課程中返回；因此，render()函數(shù)有助于實(shí)現(xiàn)這一點(diǎn)。
開發(fā)人員可能選擇使用類而不是函數(shù)的主要原因是類具有狀態(tài)，但是由于引入了鉤子，React 函數(shù)現(xiàn)在也可以具有狀態(tài)。
什么是 JavaScript 語(yǔ)法擴(kuò)展？
JavaScript 語(yǔ)法擴(kuò)展 (JSX) 是組件返回的 React 元素。它描述了特定部分/組件在用戶界面中的外觀。它的外觀類似于 HTML，但實(shí)際上是 JavaScript。
JSX 示例
<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: Wilsonp@email.com</li>
<li>Balance: $0.00</li>
</ul>
</div>
上面的 JSX 示例是從客戶組件中提取的。代碼看起來(lái)是 HTML，但它是 JSX。盡管從上面的示例中兩者之間的差異不是很明顯，但還是有一些明顯的差異。例如，在 HTML 中，您使用class屬性對(duì)相似的元素進(jìn)行分組，但在 JSX 中，您使用className屬性。
什么是虛擬 DOM？
虛擬文檔對(duì)象模塊 (VDOM) 是真實(shí) DOM 的副本。通常，當(dāng)對(duì)真實(shí) DOM 進(jìn)行更新時(shí)，更改的用戶界面將需要刷新以顯示更改。但是，使用虛擬 DOM，對(duì)用戶界面的更改是即時(shí)的。然后，虛擬 DOM 的狀態(tài)用于在稱為“協(xié)調(diào)”的過(guò)程中更新真實(shí) DOM。
探索 React 項(xiàng)目文件
當(dāng)創(chuàng)建一個(gè)新的 React 項(xiàng)目時(shí)，會(huì)自動(dòng)生成幾個(gè)不同的文件和文件夾。其中一個(gè)文件夾標(biāo)記為public。public 文件夾包含 React 樣板文件中唯一的 HTML 文件，名為index.html。
index.html 文件有一個(gè)帶有根 id 的<div>標(biāo)記，這很重要，因?yàn)檫@是主要的 React 組件被渲染的地方（這是給你的 React 組件轉(zhuǎn)換為可以顯示的 DOM 節(jié)點(diǎn)的過(guò)程的名稱在瀏覽器中）。
但是，渲染過(guò)程發(fā)生在另一個(gè)文件index.js中，React 應(yīng)用程序根文件（即App.js文件）在該文件中被渲染，然后傳遞給index.html文件。
從index.html文件中，您可以更改 Web 應(yīng)用程序的標(biāo)題；但是，對(duì) React 應(yīng)用程序的所有其他調(diào)整（包括創(chuàng)建新組件）都是從另一個(gè)文件夾（即src文件夾）進(jìn)行的。src文件夾包含index.js和App.js文件。
App.js文件是根react組件，它負(fù)責(zé)在第一個(gè) React 應(yīng)用程序啟動(dòng)時(shí)最初在 Web 瀏覽器中顯示的內(nèi)容。App.js文件包含一個(gè)名為App的函數(shù)，該函數(shù)返回 JSX。在此處了解有關(guān) React 樣板以及如何安裝 React 應(yīng)用程序的更多信息。
創(chuàng)建組件
創(chuàng)建組件時(shí)，您需要了解兩件事。第一個(gè)也是最重要的是，新創(chuàng)建的組件永遠(yuǎn)不會(huì)顯示在您的用戶界面中，除非它被導(dǎo)入并在App組件（App.js文件）中使用。
第二件事是通常的做法是每個(gè)組件文件名都以大寫字母開頭。如上所述，可以使用函數(shù)或類來(lái)創(chuàng)建組件。然而，React 正在遠(yuǎn)離類組件，現(xiàn)在主要使用函數(shù)。
創(chuàng)建新組件示例
function Customer() {
return (
<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: Wilsonp@email.com</li>
<li>Balance: $0.00</li>
</ul>
</div>
);
}
export default Customer;
上面的代碼創(chuàng)建了一個(gè)新的客戶組件并導(dǎo)出函數(shù)，這樣客戶組件就可以被App組件導(dǎo)入。
使用 App 組件示例
import Customer from './components/Customer';
function App() {
return (
<div>
<h1>Customer Manager</h1>
<Customer/>
</div>
);
}
export default App;
正如您在上面的示例中看到的那樣，應(yīng)用程序組件導(dǎo)入客戶組件，并按照它應(yīng)該出現(xiàn)在用戶界面中的順序排列它（在本例中位于customer manager標(biāo)簽之后）。然后App組件被導(dǎo)出，并由index.js文件導(dǎo)入，在 DOM 中呈現(xiàn)和顯示。
關(guān)于App組件要記住的重要一點(diǎn)是只能有一個(gè)父元素（在上面的示例中是<div>標(biāo)簽）。因此，該父元素之外的任何元素都不會(huì)顯示在 UI 中。
渲染 App 組件示例
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
上面的代碼顯示了index.js文件的內(nèi)容，該文件使用上面代碼中的document.getElementById('root')方法使用 render 函數(shù)將App組件渲染到 DOM 。這可以通過(guò)index.html文件使用的根 ID 在瀏覽器中顯示以下輸出來(lái)實(shí)現(xiàn)：
現(xiàn)在您可以在 ReactJS 中創(chuàng)建組件
本文為您提供了 React 庫(kù)的全面視圖，以及如何利用它來(lái)創(chuàng)建令人驚嘆的用戶界面。使用 React，您的用戶界面不僅會(huì)表現(xiàn)良好并且看起來(lái)完全符合您的要求，而且它們也很容易維護(hù)（感謝組件）。
現(xiàn)在您可以使用 React 庫(kù)創(chuàng)建專業(yè)的用戶界面。但是沒有必要停留在 React 上。還有一系列其他工具可用于補(bǔ)充您的前端開發(fā)過(guò)程。
