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

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

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

React的發(fā)展

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

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

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

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

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

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

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

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

創(chuàng)建了React應(yī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文件夾

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

public文件夾

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

請注意以下幾點：

Webpack不會處理public文件夾。

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

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

src文件夾

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

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

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

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

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

package.json

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

name——您的項目名稱。它必須少于或等于214個字符

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

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

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

Readme.md

這是一個包含項目摘要和說明的Markdown文件。

React的特點

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

組件

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

JavaScript語法擴(kuò)展

JavaScript語法擴(kuò)展(JSX)也稱為JavaScript XML，是一種JavaScript功能，允許我們在JavaScript代碼中編寫HTML元素。以下代碼是JSX的一個示例。

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

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

Props

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

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

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

<Car brand="Toyota">

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

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

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

簡而言之，props存儲了由React組件的子組件訪問的數(shù)據(jù)。

React中的狀態(tài)(States)是存儲組件數(shù)據(jù)或信息的對象。與Props不同，狀態(tài)是可變的，可以根據(jù)用戶請求進(jìn)行修改。當(dāng)狀態(tài)被修改時，React會重新渲染瀏覽器上的組件。讓我們看一個狀態(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)用戶點擊按鈕時，根據(jù)代碼中指定的內(nèi)容，Toyota會更新為Honda。

請注意以下幾點：

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

React Hooks

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

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

useState Hook

useState是一種用于跟蹤狀態(tài)的函數(shù)式Hook。useState接受一個初始值，并在用戶請求時進(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鉤子接受一個初始值0，并在用戶點擊按鈕時增加該值。

useEffect Hook

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

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

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

其他React Hooks包括：

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

React的好處

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

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

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

總結(jié)

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