1.1 什么是React？

React是Facebook用以開發(fā)單頁應(yīng)用（Single Page Applications，SPA）而發(fā)布的一款前端框架。那么問題來了，什么是“單頁應(yīng)用”呢？要想理解這個概念，我們要從傳統(tǒng)的服務(wù)端（Server-side）應(yīng)用開始。對于Server-side application 服務(wù)端應(yīng)用而言，服務(wù)器負(fù)責(zé)處理業(yè)務(wù)邏輯、存儲數(shù)據(jù)和網(wǎng)站渲染。當(dāng)用戶在客戶端點(diǎn)擊了一個鏈接，它就會向網(wǎng)站服務(wù)器發(fā)送一個請求，網(wǎng)站在接到請求后會根據(jù)預(yù)先定義好的業(yè)務(wù)邏輯返回一個包含HTML的響應(yīng)，瀏覽器接收響應(yīng)然后將其中的HTML渲染出來展示給用戶。

這種方式存在一個問題，就是服務(wù)器接收并處理了大量的請求。例如，當(dāng)我們?nèi)サ揭粋€網(wǎng)站然后點(diǎn)擊“首頁”，我們就向服務(wù)器發(fā)送了一個請求然后服務(wù)器響應(yīng)請求返回頁面，當(dāng)我們點(diǎn)擊“關(guān)于”鏈接時，就又向服務(wù)器發(fā)送了一個請求然后服務(wù)器又響應(yīng)這個請求返回頁面，如此往復(fù)。問題的關(guān)鍵在于，這種方式建立的網(wǎng)站是由離散的網(wǎng)頁組成的，當(dāng)用戶在這些網(wǎng)頁間跳轉(zhuǎn)時，瀏覽器要不斷發(fā)送請求，服務(wù)器要不斷地相應(yīng)請求，加載并渲染不同頁面的HTML文件。

大量的請求和響應(yīng)消耗了大量的時間和資源導(dǎo)致網(wǎng)頁的加載緩慢，然而移動端和桌面端的應(yīng)用在大多數(shù)時間卻能保證流暢的使用體驗(yàn)。React也想將這種流暢性帶到瀏覽器中的網(wǎng)頁應(yīng)用中，那么怎么樣才能做到呢？答案就是減少頻繁的請求和頁面加載。

在“單頁應(yīng)用”中用戶仍然可以點(diǎn)擊應(yīng)用中的各種鏈接來進(jìn)行頁面切換，但是這次處理的邏輯卻不一樣了，客戶端將會接收請求并自己內(nèi)部處理而不再向Server發(fā)送請求，客戶端通過JavaScript直接渲染出新HTML頁面，而服務(wù)器則只負(fù)責(zé)向客戶端提供應(yīng)用數(shù)據(jù)。在SPA的模式下，客戶端不必總是等待服務(wù)器的響應(yīng)，而服務(wù)器也省去了向客戶端發(fā)送頁面的任務(wù)。本質(zhì)上就是將服務(wù)器上的頁面渲染的任務(wù)分給了客戶端，兩側(cè)達(dá)成了平衡實(shí)現(xiàn)了效率最大化。當(dāng)然能做到這點(diǎn)，其實(shí)和硬件的進(jìn)步以及瀏覽器發(fā)展有很大關(guān)系，硬件和瀏覽器的發(fā)展使得客戶端計(jì)算能力提高可以承擔(dān)更多的任務(wù)具有了一定獨(dú)立性，而不必像以前完全依賴于服務(wù)器，實(shí)際上SPA僅僅需要服務(wù)端的數(shù)據(jù)。

此外，在SPA中，瀏覽器加載一個HTML文件之后用戶在此頁面進(jìn)行跳轉(zhuǎn)時用戶仍會停留在當(dāng)前的頁面上不會像以前一樣打開新的標(biāo)簽頁窗口，因?yàn)镾PA通過JavaScript在單一頁面完成HTML的卸載和加載從而原地變化瀏覽器視圖。用戶雖然感覺上是在不同的頁面來回穿梭導(dǎo)航，但實(shí)際上仍然是在同一個頁面。

1.2 React的特性

高效的DOM操作

加載和卸載同一頁面的不同視圖涉及查詢和操作 DOM 元素。 此類 DOM 操作涉及添加子節(jié)點(diǎn)、刪除子樹，并且可能非常慢。 這就是 React 在有效操作 DOM 元素方面實(shí)現(xiàn)突破的地方。 React 通過為我們更新瀏覽器的DOM 來做到這一點(diǎn)。 使用 React，我們不直接與 DOM 交互。 相反，我們與 React 用來構(gòu)建實(shí)際 DOM 的虛擬 DOM 進(jìn)行交互。

虛擬 DOM 由 React 元素（在 JSX 中指定——稍后會詳細(xì)介紹）組成，這些元素看起來類似于 HTML 元素，但實(shí)際上是 Javascript對象。 使用 Javascript 對象比直接使用 DOM API 快得多。 我們對 Javascript 對象（虛擬 DOM）進(jìn)行更改，React 會盡可能高效地為我們呈現(xiàn)這些更改。

https://juejin.cn/post/6844903870229905422

異步操作

當(dāng)我們需要從/向服務(wù)器獲取或發(fā)送數(shù)據(jù)時，我們會向服務(wù)器發(fā)送請求。 但這些主要限于初始加載和必要的服務(wù)器端操作，如數(shù)據(jù)庫操作。 除了這些操作，我們不會經(jīng)常需要向服務(wù)器請求。 如果我們確實(shí)發(fā)出服務(wù)器請求，我們會異步執(zhí)行，這意味著我們?nèi)匀粫⒓磳㈨撁嬷匦鲁尸F(xiàn)給用戶，然后等待新數(shù)據(jù)到達(dá)并合并它，并在數(shù)據(jù)到達(dá)時僅重新呈現(xiàn)所需的視圖 ; 從而提供流暢的體驗(yàn)。

漸進(jìn)式

在本書中，我將一步一步地從頭開始教你如何使用 Hooks 進(jìn)行 React。 您將構(gòu)建一個應(yīng)用程序，您可以在其中輸入搜索詞并通過 GitHub RESTful api 接收搜索結(jié)果。

最后，您還將構(gòu)建一個具有完整 C.R.U.D. 操作的真實(shí)應(yīng)用程序

這些是您在許多實(shí)際應(yīng)用程序中看到的模式。 在本書中，你將學(xué)習(xí)如何使用 React Hooks 來實(shí)現(xiàn)這些模式。

盡管本書涵蓋了使用 React 開發(fā)單頁 Web 應(yīng)用程序的技術(shù)，但 Web 瀏覽器并不是 React 應(yīng)用程序可以運(yùn)行的唯一地方。 React Native 允許我們使用 React 開發(fā) iOS 和 Android 原生應(yīng)用。 未來還會出現(xiàn) React VR，這是一個用于構(gòu)建提供 360 度體驗(yàn)的交互式虛擬現(xiàn)實(shí)應(yīng)用程序的框架。 我們希望這本書能為你提供一個堅(jiān)實(shí)的基礎(chǔ)，讓你可以在 React 中構(gòu)建應(yīng)用程序，甚至超越 Web 瀏覽器。

1.3 組件思維

React 應(yīng)用程序由組件構(gòu)成。 例如，如果我們想構(gòu)建一個像我們在網(wǎng)易云上看到的那樣的榜單頁面模塊，我們可以將它分成三個組件。 搜索欄組件、側(cè)邊欄組件和歌單組件。

一個React 組件中包含一個 JSX 模板，它最終輸出為 HTML 元素。 組件內(nèi)部有自己的數(shù)據(jù)和邏輯來控制 JSX 模板。

組件還可以包含其他組件。 例如，在我們顯示歌曲榜單列表的側(cè)邊欄組件中，我們使用多個榜單組件來做到這一點(diǎn)。

這種架構(gòu)的好處有助于我們將大型應(yīng)用程序分解為更小的可管理組件。 另外，我們可以在應(yīng)用程序中甚至在不同的應(yīng)用程序中重用以前編寫好的組件。 例如，我們可以在不同的應(yīng)用程序中重用搜索欄組件。

下面是一個顯示簡單字符串“榜單”的組件示例

import React from 'react' const Products = () => { ? ?return ( ? ?<div> ? ? ?<h2>榜單</h2> ? ?</div> ?) } export default Products

如前所述，我們使用類似于 HTML 的語法（稱為 JSX，Javascript XML）來定義我們的 React 組件。 JSX 是 Javascript 的語法擴(kuò)展。 我們使用 JSX 來構(gòu)建一個帶有 React 元素的虛擬 DOM。 Facebook 發(fā)布的JSX 為創(chuàng)建具有屬性的復(fù)雜 DOM 樹提供了一種簡潔的語法。 他們希望讓 React 像 HTML 和 XML 一樣更具可讀性。

這是從組件角度思考的宏觀方向。 隨著您閱讀本書的進(jìn)展，您將看到更多的實(shí)際操作。

1.4 開發(fā)配置

1）安裝 Node

首先，我們需要安裝 NodeJS。 NodeJS 是一種服務(wù)器端語言，我們不需要它，因?yàn)槲覀儧]有編寫任何服務(wù)器端代碼。 我們需要它是因?yàn)樗?npm（Node Package Manager），一套JS 的包管理系統(tǒng)。 npm 在管理應(yīng)用程序的依賴項(xiàng)（dependency）方面非常流行。 我們將使用 npm 來安裝我們后續(xù)需要的其他工具。

從 nodejs.org 獲取最新版本的 NodeJS 并將其安裝在您的機(jī)器上。 安裝 NodeJS 的過程非常簡單直接。

要檢查 Node 是否已正確安裝，請?jiān)诿钚兄墟I入以下命令（Windows 上的命令提示符或 Mac 上的終端）：node -v，您應(yīng)該會看到顯示的Node版本。

2）安裝 Create-React-App

create-react-app是開始構(gòu)建新的 React 單頁應(yīng)用程序的最佳方式。 它自動配置了我們的開發(fā)環(huán)境，以便我們可以在應(yīng)用程序中使用最新的 Javascript 功能和優(yōu)化。 它是一個命令行工具，可以用來創(chuàng)建新的 React 項(xiàng)目、添加文件以及幫助我們更好的完成正在進(jìn)行的開發(fā)任務(wù)（如讓測試、捆綁和部署更容易）。 它的底層使用了 Babel 和 Webpack 等構(gòu)建工具，并為開發(fā)人員提供了良好的開發(fā)體驗(yàn)，一般情況下我們無需對其進(jìn)行任何手動配置。

要從命令行安裝create-react-app，請運(yùn)行以下命令npm install -g create-react-app

3）編輯器

在本書中，我們將使用 VScode (https://code.visualstudio.com/)，它是Microsoft開發(fā)的一款優(yōu)秀、輕量級和跨平臺的編輯器。

4）Chrome 瀏覽器

在本書中，我們將使用 Chrome 作為我們的瀏覽器。 您可以使用其他瀏覽器，但我強(qiáng)烈建議您使用 Chrome，因?yàn)槲覀儗⒃陂_發(fā)中使用 Chrome 開發(fā)人員工具，我想確保您在學(xué)習(xí)中擁有與我們相同的體驗(yàn)。

1.5 使用creact-react-app創(chuàng)建新的開發(fā)項(xiàng)目

首先，在終端中導(dǎo)航到要在其中創(chuàng)建 React 項(xiàng)目的文件夾。 接下來，輸入下面的命令create-react-app <PROJECT_NAME>。

這將在該目錄中創(chuàng)建您的 React 項(xiàng)目文件夾，其中包含三個依賴項(xiàng)：React、ReactDOM 和 react-scripts。 react-scripts 由 Facebook 創(chuàng)建，它內(nèi)置了 Babel、ESLint、Webpack 等，因此我們不必手動配置它們。創(chuàng)建文件夾后，通過命令導(dǎo)航到該文件夾cd <PROJECT_NAME>，然后命令行鍵入npm start，start命令將會啟動服務(wù)器，監(jiān)視您的文件并在您對這些文件進(jìn)行更改時重建應(yīng)用程序。 您還可以運(yùn)行npm run build命令，該命令會創(chuàng)建一個已被轉(zhuǎn)譯和壓縮的生產(chǎn)就緒包。

在服務(wù)啟動完成后，在瀏覽器中導(dǎo)航到 http://localhost:3000/，您的應(yīng)用程序會向您顯示如下圖所示的畫面。

其他方式

在 create-react-app 的官方文檔（https://reactjs.org/docs/create-a-new-react-app.html）中，展示了另一種創(chuàng)建項(xiàng)目的方式。npx create-react-app <項(xiàng)目名稱>

這是創(chuàng)建 React 項(xiàng)目的另一種方法，無需運(yùn)行 npm install 。 但請注意，npx 是一個命令行工具，僅在 npm 5.2 及更高版本中才開始安裝。 如果要使用 npx ，請確保已升級Node到合適版本，然后運(yùn)行 npx 。 使用 npx 的好處是它會自動使用最新版本的 create-react-app。 除此之外，兩種方法之間沒有區(qū)別。

項(xiàng)目文件說明

現(xiàn)在讓我們看看剛剛創(chuàng)建的項(xiàng)目文件。 當(dāng)你在 VScode 編輯器中打開項(xiàng)目文件夾時，你會發(fā)現(xiàn)如下幾個文件。

我們不會一一介紹所有文件，因?yàn)槲覀兊闹攸c(diǎn)是快速開始我們的第一個 React 應(yīng)用程序，但我們將簡要說明一些比較重要的文件和文件夾。

我們應(yīng)用程序的主體位于 src 文件夾中。 所有 React 組件、CSS 樣式、圖像（例如 logo.svg）和我們應(yīng)用程序需要的其他內(nèi)容都在這里。 此文件夾之外的任何其他文件都旨在支持構(gòu)建您的應(yīng)用程序（應(yīng)用程序文件夾將占用我們 99% 的工作時間?。?。 在本書的學(xué)習(xí)過程中，您將了解其余庫文件和文件夾的用途。

在 src 文件夾中，有一個 index.js 文件，它是我們應(yīng)用程序的主入口點(diǎn)。 在 index.js 中，我們將 App React 元素渲染到根 DOM 節(jié)點(diǎn)中。 完全使用 React 構(gòu)建的應(yīng)用程序通常只有一個根 DOM 節(jié)點(diǎn)。

index.js

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ?<React.StrictMode> ? ?<App /> ?</React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

在 index.js 中，我們導(dǎo)入了需要在瀏覽器中使用 React 的 React 和 ReactDOM。 React 是用于創(chuàng)建視圖的庫。 ReactDOM 是用于在瀏覽器中呈現(xiàn) UI 的庫。 這兩個庫在 0.14 版本被拆分為兩個包，拆分的目的是允許組件在 Web 版本的 React 和 React Native 之間共享，從而支持各種平臺的渲染。

index.js 使用以下幾行導(dǎo)入 index.css 、 App組件和 reportWebVitals。

import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals';

然后它使用以下代碼渲染App：

const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ?<React.StrictMode> ? ?<App /> ?</React.StrictMode> );

最后一行代碼有詳細(xì)的注釋

// If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

// 如果你想開始測量你的應(yīng)用程序的性能，傳遞一個函數(shù)

// 記錄結(jié)果（例如：reportWebVitals(console.log)）

// 或發(fā)送到分析端點(diǎn)。 了解更多：https://bit.ly/CRA-vitals

app.js

在上面代碼中，我們有一個名為 App 的基于函數(shù)的組件。 每個 React 應(yīng)用程序至少有一個組件即根組件，在 App.js 中命名為 App。 App 組件通過它返回的 JSX 模板控制視圖

return ( ? ?<div className="App"> ? ? ?...... ? ?</div> );

（注意：在 JSX 中，任何具有 HTML 類屬性的元素都使用該屬性的 className 而不是 class 。由于 class 是 Javascript 中的保留字，我們必須使用 className 來定義 HTML 元素的 class 屬性。）

一個組件必須返回一個 React 元素。 在我們的例子中，App 返回一個 <div />。 該元素可以是原生 DOM 組件的表示，例如 <div />，也可以時您自己定義的其他復(fù)合組件。 我們將在下一章詳細(xì)介紹這一點(diǎn)。

組件返回的標(biāo)簽語法不是 HTML 而是 JSX。 JSX 是 Javascript 的語法擴(kuò)展。 我們用它來描述 UI 應(yīng)該是什么樣的。與 HTML 一樣，在 JSX 中，元素的類型是用標(biāo)簽指定的。 標(biāo)簽的屬性（attribute）展現(xiàn)了特性（property）。 此外，也可以向HTML一樣可以在開始標(biāo)簽和結(jié)束標(biāo)簽之間添加標(biāo)簽。

組件可以是基于函數(shù)（function based）的也可以是基于類（class based）的。在本教程中，我們將重點(diǎn)關(guān)注基于函數(shù)的組件。 我們在 App 中擁有的是一個基于函數(shù)的組件，從它的頭函數(shù) App() 可以看出。

接下來，我們還要介紹 package.json 文件和 node_modules 文件夾

package.json

package.json 是Node包的配置文件，其中列出了我們項(xiàng)目使用的第三方包。

node_modules

node_modules 文件夾由 Node.js 創(chuàng)建， package.json 中列出的所有第三方模塊都在其中。

1.6 編輯我們的第一個 React 組件

因?yàn)槲覀兊?App.js 目前有相當(dāng)多的樣板代碼，我們將刪除一些內(nèi)容，從一個更簡單的 App.js 開始。 打開 App.js 并將其更改為以下內(nèi)容：

從上面的函數(shù)聲明中可以看出，我們創(chuàng)建了一個基于函數(shù)的組件。 該函數(shù)在單個 React 元素中返回一個 JSX 模板。

通過 React Hooks，我們可以定義應(yīng)用程序邏輯并通過狀態(tài)屬性和添加其他功能實(shí)現(xiàn)與視圖交互。 目前，我們的根應(yīng)用程序組件沒有狀態(tài)屬性或其他功能。

當(dāng)您運(yùn)行應(yīng)用程序時，你應(yīng)該會看到如下內(nèi)容：

現(xiàn)在，你可以嘗試將 App.js 中的“Learn React”更改為“Learn React Hooks”。 請注意，瀏覽器會自動重新加載修改后的標(biāo)題。 因?yàn)?React 編譯器在‘watch’模式下運(yùn)行，它檢測到有工程文件更改就會重新編譯代碼。 在 Chrome 瀏覽器中，應(yīng)用程序會自動刷新，因此您不必在每次代碼更改時都必須手動刷新頁面。

基于函數(shù)的組件 VS 基于類的組件

在 React 中，創(chuàng)建組件的方式主要有兩種，我們上面展示的是基于函數(shù)的組件，函數(shù)組件是我們課程的重點(diǎn)，后面我們還要講解函數(shù)組件可以應(yīng)用哪些 React 鉤子。 另一種類型的組件是類組件。 如果你想使用類組件來學(xué)習(xí) React，可以到網(wǎng)上查閱其他資料。

現(xiàn)在，你應(yīng)該明白函數(shù)組件和類組件都是 React 組件。也就是說，一個組件既可以用一個函數(shù)來實(shí)現(xiàn)，也可以用一個類來實(shí)現(xiàn)。

過去，使用類組件給了我們一些優(yōu)勢：它們可以訪問組件級別的“狀態(tài)”，它們提供生命周期事件，例如componentDidMount ， componentDidUpdate 。這些功能在以前使用函數(shù)組件來實(shí)現(xiàn)非常困難而且不夠直觀。但是現(xiàn)在通過 React Hooks，基于函數(shù)的組件可以實(shí)現(xiàn)類組件具有的所有功能。

不僅如此，函數(shù)組件還具有其他優(yōu)勢，例如：

• 通過封裝邏輯使得代碼更簡潔

• 改進(jìn)了跨組件共享邏輯的可重用性

• 更多其他

因此，本課程的目的是讓你學(xué)習(xí)使用 hooks鉤子 開發(fā) React 應(yīng)用程序，這將是 React 開發(fā)在未來的重大轉(zhuǎn)變。

小結(jié)

在本章中，我們介紹了React 應(yīng)用程序的核心構(gòu)建塊——組件。我們還介紹了 React 開發(fā)工具，通過使用 create-react-app 即可創(chuàng)建一個新的 React 項(xiàng)目。 create-react-app 提供內(nèi)部編譯，它會自動為我們生成我們編寫的應(yīng)用程序，我們可以在瀏覽器上查看。在下一章中，我們將著手實(shí)現(xiàn)一個簡單 React 應(yīng)用程序。