React是一種用于開(kāi)發(fā)交互式用戶界面的JavaScript庫(kù)。React還可用于開(kāi)發(fā)單頁(yè)應(yīng)用程序(SPA)，從而提高應(yīng)用程序性能。

最初作為前端JavaScript庫(kù)開(kāi)發(fā)，隨著時(shí)間的推移，React已經(jīng)發(fā)展成可以用于開(kāi)發(fā)服務(wù)器端渲染以及移動(dòng)應(yīng)用程序。例如，React

Native用于開(kāi)發(fā)iOS和Android移動(dòng)應(yīng)用。

React的發(fā)展

React由Facebook(現(xiàn)在稱為Meta)的軟件工程師Jordan Walke開(kāi)發(fā)。Jordan Walke最初創(chuàng)建了一個(gè)名為'FaxJS'的原型。'FaxJS'首次部署在2011年的Facebook新聞動(dòng)態(tài)中。2012年，F(xiàn)acebook收購(gòu)了Instagram，并將'FaxJS'部署到了Instagram上。

2013年5月，React在美國(guó)的JSConf上正式發(fā)布，并成為開(kāi)源項(xiàng)目。React由Facebook(現(xiàn)在稱為Meta)維護(hù)，用于創(chuàng)建交互式的Web界面。

2015年2月，在React大會(huì)上，F(xiàn)acebook宣布了React Native的創(chuàng)建，后來(lái)在2015年3月成為開(kāi)源項(xiàng)目。React Native用于開(kāi)發(fā)iOS和Android應(yīng)用程序。

2017年4月18日，F(xiàn)acebook宣布了一組名為React Fiber的新渲染算法。這種創(chuàng)新改進(jìn)了以前被稱為“Stack”的算法。'Stack'在渲染動(dòng)態(tài)變化時(shí)速度較慢。與此同時(shí)，使用Fibers，頁(yè)面的結(jié)構(gòu)被分割成片段，這樣就可以方便地獨(dú)立維護(hù)和更新。

React的結(jié)構(gòu)

在本節(jié)中，我們將介紹React的結(jié)構(gòu)組成。我們將按照官方推薦的流程創(chuàng)建適用于開(kāi)發(fā)的React應(yīng)用程序。讓我們開(kāi)始吧。

官方文檔建議在學(xué)習(xí)React或創(chuàng)建新的單頁(yè)應(yīng)用程序時(shí)使用Create React App。示例：

C:\Users\Username\Desktop\project_folder>npx create-react-app my-app

創(chuàng)建了React應(yīng)用程序之后，您的項(xiàng)目應(yīng)該如下所示的文件結(jié)構(gòu)。

my-app/
node_modules/
public/
favicon.ico
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
.gitignore
package.json
README.md

現(xiàn)在，讓我們探索上述文件和文件夾，并了解它們的用途。

node_modules文件夾

此文件夾包含項(xiàng)目所需的所有軟件包和依賴項(xiàng)。當(dāng)您安裝這些依賴項(xiàng)和軟件包時(shí)，它們會(huì)被下載并復(fù)制到node_modules文件夾中。請(qǐng)注意，由于該文件夾太大，建議不要將此文件夾提交到您的版本控制存儲(chǔ)庫(kù)中。

public文件夾

public文件夾包含index.html文件，您可以在其中設(shè)置頁(yè)面標(biāo)題和元標(biāo)記。您可以在public文件夾中添加其他資產(chǎn)，例如樣式表、腳本、圖像和字體。

請(qǐng)注意以下幾點(diǎn)：

Webpack不會(huì)處理public文件夾。

使用名為PUBLIC_URL的環(huán)境變量來(lái)引用public文件夾中的資產(chǎn)。例如，在index.html文件中使用它：

<link rel="icon" href="%PUBLIC_URL%/favicon.ico />

src文件夾

src文件夾包含Webpack處理的文件——Webpack是React常用的JavaScript工具，用于打包和管理依賴項(xiàng)。所有的JavaScript文件和CSS文件必須位于src文件夾中，以便Webpack能夠識(shí)別和處理它們。

src文件夾中的默認(rèn)文件包括App.js、App.css、App.test.js、index.js、index.css等。在這個(gè)文件夾中，您也可以創(chuàng)建組件。讓我們探索一下一些默認(rèn)文件。

• App.js——根組件，包含要渲染的內(nèi)容。雖然可以替換或重命名App.js。
• App.css——包含App.js組件的樣式文件。
• App.test.js——默認(rèn)的文件，您可以在其中進(jìn)行基本測(cè)試。
• index.js——一個(gè)JavaScript文件，用于渲染我們的主要組件。
• index.css——包含項(xiàng)目的通用樣式的文件。

請(qǐng)注意，public文件夾中的index.html和src文件夾中的index.js不能更改，以便項(xiàng)目可以構(gòu)建。它們必須存在，并且文件名必須完全相同。

• gitignore文件
• gitignore文件指定Git應(yīng)忽略和保持未跟蹤的文件和文件夾。

package.json

此文件以JSON格式包含有關(guān)您的項(xiàng)目的重要信息。以下是package.json文件中的一些重要信息列表：

name——您的項(xiàng)目名稱。它必須少于或等于214個(gè)字符

version——您的應(yīng)用程序的當(dāng)前版本

dependencies——軟件包及其版本的集合

scripts——我們可以運(yùn)行的一組節(jié)點(diǎn)命令。

Readme.md

這是一個(gè)包含項(xiàng)目摘要和說(shuō)明的Markdown文件。

React的特點(diǎn)

React由許多令人驚嘆且獨(dú)特的特性組成。這些特性使React受歡迎，易于閱讀和維護(hù)。讓我們看一下React的一些主要特點(diǎn)。

組件

組件是獨(dú)立且可重用的代碼片段，用于創(chuàng)建用戶界面。組件是JavaScript函數(shù)，返回HTML元素。組件使得React代碼易于閱讀和維護(hù)。它們還能夠減少編寫(xiě)的代碼量，因?yàn)樗鼈兪强芍赜玫?，即可以在?yīng)用程序的多個(gè)部分中使用。App.js是組件的一個(gè)例子。

JavaScript語(yǔ)法擴(kuò)展

JavaScript語(yǔ)法擴(kuò)展(JSX)也稱為JavaScript XML，是一種JavaScript功能，允許我們?cè)贘avaScript代碼中編寫(xiě)HTML元素。以下代碼是JSX的一個(gè)示例。

const listItems = {
<ul className="listItems">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
}

Babel庫(kù)——JavaScript編譯器——將HTML元素轉(zhuǎn)換為純JavaScript。JSX的重要性在于它簡(jiǎn)化了JavaScript代碼，使其易于閱讀，特別是對(duì)于熟悉HTML的人來(lái)說(shuō)。

Props

React中的Props代表屬性。它們是傳遞給React組件的參數(shù)，就像HTML屬性一樣。

<img src="./image.jpg" width="100" height="150">

上面的代碼是一個(gè)包含一些屬性（src、width和height）的HTML圖像標(biāo)簽。這些屬性決定了圖像的呈現(xiàn)方式。Props也是如此。它們是傳遞給組件的函數(shù)參數(shù)。Props是只讀的，因此不能修改。讓我們看一個(gè)關(guān)于props的簡(jiǎn)單示例。

<Car brand="Toyota">

在上面的代碼中，Car元素具有一個(gè)屬性–brand。

函數(shù)Car(props){
return(
<h1>The Car brand is {props.name}</h1>
)
}
export default Car;

接下來(lái)，為了渲染我們的屬性，Car組件接收一個(gè)參數(shù)–props–可以是您選擇的任何名稱，如上面的代碼所示。

簡(jiǎn)而言之，props存儲(chǔ)了由React組件的子組件訪問(wèn)的數(shù)據(jù)。

React中的狀態(tài)(States)是存儲(chǔ)組件數(shù)據(jù)或信息的對(duì)象。與Props不同，狀態(tài)是可變的，可以根據(jù)用戶請(qǐng)求進(jìn)行修改。當(dāng)狀態(tài)被修改時(shí)，React會(huì)重新渲染瀏覽器上的組件。讓我們看一個(gè)狀態(tài)的例子。

javascript
import React from "react";
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Toyota",
model: "Mustang",
color: "Red",
year: "1964"
};
}
changeBrand = () => {
this.setState({ brand: "Honda" });
};
render() {
return (


The Car brand is {this.state.brand}
Click
);
}
}
export default Car;

上面的代碼顯示了如下的屏幕截圖：

state

當(dāng)用戶點(diǎn)擊按鈕時(shí)，根據(jù)代碼中指定的內(nèi)容，Toyota會(huì)更新為Honda。

請(qǐng)注意以下幾點(diǎn)：

• 狀態(tài)對(duì)象可以存儲(chǔ)任意數(shù)量的屬性。
• 狀態(tài)對(duì)象是可變的，即可以根據(jù)用戶請(qǐng)求進(jìn)行修改。
• 使用setState方法來(lái)改變狀態(tài)對(duì)象。

React Hooks

Hooks是一些函數(shù)，提供對(duì)狀態(tài)和其他React功能的訪問(wèn)。借助React Hooks，不再需要使用類組件。

Hooks是在React版本16.8中引入的新功能。讓我們來(lái)看一些這些React Hooks。

useState Hook

useState是一種用于跟蹤狀態(tài)的函數(shù)式Hook。useState接受一個(gè)初始值，并在用戶請(qǐng)求時(shí)進(jìn)行更新。

javascript
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<>

You clicked me {count} times
Click me
);
}
export default App;

上面的代碼顯示了如下的屏幕截圖：

useState hook

上面的示例使用useState鉤子接受一個(gè)初始值0，并在用戶點(diǎn)擊按鈕時(shí)增加該值。

useEffect Hook

useEffect是一種執(zhí)行副作用的鉤子，例如從后端服務(wù)器獲取數(shù)據(jù)、更新DOM、定時(shí)器等。useEffect接受兩個(gè)參數(shù)：一個(gè)函數(shù)和一個(gè)依賴項(xiàng)(可選)。

javascript
import { useEffect } from 'react';
useEffect(() => {
// 每次渲染之后執(zhí)行
}, []);

上面是一個(gè)帶有依賴項(xiàng)為空數(shù)組的useEffect鉤子結(jié)構(gòu)的示例。

其他React Hooks包括：

• useContext
• useRef
• useReducer
• useCallback
• useMemo
• 自定義Hooks

React的好處

React具有廣泛的好處，可以用于多種目的。讓我們來(lái)看一些好處。

• Web應(yīng)用程序開(kāi)發(fā)：React可以用于開(kāi)發(fā)具有后端服務(wù)器的網(wǎng)站，使用React框架。其中一些框架包括Next.js、Gatsby、Remix等。
• 移動(dòng)應(yīng)用程序開(kāi)發(fā)：React可以用于開(kāi)發(fā)移動(dòng)應(yīng)用程序(iOS和Android)，使用React Native。
• 單頁(yè)應(yīng)用程序：React可以用于創(chuàng)建單頁(yè)應(yīng)用程序(SPA)。SPA在單個(gè)頁(yè)面上呈現(xiàn)動(dòng)態(tài)內(nèi)容，減少加載時(shí)間并提高性能。
• 需求量大：React是最廣泛使用的JavaScript庫(kù)，用于開(kāi)發(fā)交互式用戶界面，因此對(duì)React開(kāi)發(fā)人員的需求量很高。
• 易于維護(hù)：React應(yīng)用程序使用獨(dú)立組件開(kāi)發(fā)。這些組件類似于JavaScript函數(shù)，但在獨(dú)立模塊中工作并返回HTML元素。因此，使得React易于閱讀和維護(hù)。

可重用性：React組件是可重用的。換句話說(shuō)，React組件可以在應(yīng)用程序的多個(gè)部分中重復(fù)使用，從而減少需要編寫(xiě)的代碼量，實(shí)現(xiàn)快速開(kāi)發(fā)。

總結(jié)

本文幫助我們了解了React的基礎(chǔ)知識(shí)。了解React的基本原理對(duì)于成為專業(yè)的React開(kāi)發(fā)人員來(lái)說(shuō)至關(guān)重要。本文中，我們學(xué)習(xí)了React的概述、歷史、結(jié)構(gòu)、特點(diǎn)以及React的好處。還有更多深入的React內(nèi)容等待您去探索和實(shí)踐，讓您不斷提升React的專業(yè)技能和經(jīng)驗(yàn)。