React，這個風靡開發界的JavaScript庫，簡化了構建交互式用戶界面的過程，適用範圍涵蓋網頁、移動端和桌面平台。全球眾多公司，包括Netflix和Airbnb等巨頭，都在使用React。
本指南將帶您快速入門React，並講解其核心概念。我們將利用Create React App工具快速搭建項目，並逐步構建一個簡單的React應用。學習結束後，您將掌握React基礎知識，並為進一步學習做好準備。
學習React之前，最好具備HTML、CSS和JavaScript的基礎知識。了解Node.js和npm包管理器也有助於學習。
本教程需要在您的機器上安裝Node和npm。您可以訪問Node.js下載頁面下載所需版本（npm與Node捆綁在一起）。或者，您可以參考我們的教程，使用版本管理器安裝Node。
React是一個用於構建UI組件的JavaScript庫。與Angular或Vue等更完整的框架不同，React只處理視圖層，因此您需要其他庫來處理路由、狀態管理等方面。本指南將重點介紹React的開箱即用功能。
React應用使用可複用的UI組件構建，這些組件可以相互交互。 React組件可以是基於類的組件，也可以是所謂的函數組件。基於類的組件使用ES6類定義，而函數組件是基本的JavaScript函數。這些函數通常使用箭頭函數定義，但也可以使用function關鍵字。基於類的組件將實現一個render函數，該函數返回一些JSX（React對常規JavaScript的擴展，用於創建React元素），而函數組件將直接返回JSX。如果您從未聽說過JSX，也不用擔心，我們稍後會詳細介紹。
React組件還可以分為有狀態組件和無狀態組件。無狀態組件的工作只是顯示它從父React組件接收的數據。如果它接收任何事件或輸入，它可以簡單地將這些事件或輸入傳遞給其父組件來處理。
另一方面，有狀態組件負責維護某種應用程序狀態。這可能涉及從外部來源獲取數據，或跟踪用戶是否登錄。有狀態組件可以響應事件和輸入來更新其狀態。
根據經驗，您應該盡可能編寫無狀態組件。這些組件更容易在您的應用程序和其它項目中重用。
在開始編碼之前，您需要知道React使用虛擬DOM來處理頁面渲染。如果您熟悉jQuery，您知道它可以通過HTML DOM直接操作網頁。在許多情況下，這種直接交互幾乎不會產生任何問題。但是，對於某些情況，例如運行高度交互的實時Web應用程序，性能可能會受到很大的影響。
為了解決這個問題，發明了虛擬DOM（真實DOM的內存表示），目前許多現代UI框架（包括React）都在使用它。與HTML DOM不同，虛擬DOM更容易操作，並且能夠在毫秒內處理大量操作而不會影響頁面性能。 React定期比較虛擬DOM和HTML DOM。然後計算差異，並將其應用於HTML DOM以使其與虛擬DOM匹配。通過這種方式，React確保您的應用程序以穩定的60幀每秒的速度渲染，這意味著用戶幾乎不會遇到任何延遲。
根據前提條件，我假設您已經設置了Node環境，並安裝了最新版本的npm（或可選的Yarn）。
接下來，我們將使用Create React App構建我們的第一個React應用程序，這是一個創建單頁React應用程序的官方實用程序腳本。
現在讓我們安裝它：
<code>npm i -g create-react-app</code>
然後用它創建一個新的React應用。
<code>create-react-app message-app</code>
根據您的互聯網連接速度，如果這是您第一次運行create-react-app命令，這可能需要一段時間才能完成。在此過程中會安裝許多包，這些包是設置方便的開發環境所必需的——包括Web服務器、編譯器和測試工具。
如果您不想全局安裝太多包，也可以使用npx，它允許您下載並運行包而無需安裝它：
<code>npx i -g create-react-app</code>
運行這兩個命令中的任何一個都應該輸出類似以下內容：
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>項目設置過程完成後，執行以下命令啟動您的React應用程序：
<code>cd message-app npm start</code>
您應該看到以下輸出：
<code>.... Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use yarn build.</code>
您的默認瀏覽器應該自動啟動，您應該看到這樣的屏幕：
現在我們已經確認了我們的入門React項目運行沒有錯誤，讓我們來看看幕後發生了什麼。您可以使用您喜歡的代碼編輯器打開文件夾message-app。讓我們從package.json文件開始：
<code>npm i -g create-react-app</code>
如您所見，Create React App已經為我們安裝了幾個依賴項。前三個與React測試庫有關，它（正如您可能猜到的那樣）使我們能夠測試我們的React代碼。然後我們有react和react-dom，這是任何React應用程序的核心包，最後是react-scripts，它設置開發環境並啟動服務器（您剛才已經看到）。
然後是四個npm腳本，用於自動化重複性任務：
最後一條命令值得詳細說明。 Create React App工具在您的實際代碼和開發環境之間提供了清晰的區分。如果您運行npm run eject，Create React App將停止隱藏它在幕後所做的工作，並將所有內容轉儲到項目的package.json文件中。雖然這使您可以更精細地控制應用程序的依賴項，但我建議您不要這樣做，因為您必須管理構建和測試項目中使用的所有復雜代碼。如果需要，您可以使用customize-cra來配置構建過程，而無需彈出。
Create React App還支持ESLint（從eslintConfig屬性可以看出），並使用react-app ESLint規則進行配置。
package.json文件的browserslist屬性允許您指定應用程序將支持的瀏覽器列表。此配置由PostCSS工具和Babel等轉換器使用。
Create React App最酷的功能之一是它開箱即用地提供熱重載。這意味著我們對代碼所做的任何更改都會導致瀏覽器自動刷新。對JavaScript代碼的更改將重新加載頁面，而對CSS的更改將更新DOM而無需重新加載。
現在，讓我們首先通過按Ctrl C停止開發服務器。服務器停止後，刪除src文件夾中serviceWorker.js和setupTests.js文件以外的所有內容。如果您有興趣了解服務工作者的作用，可以在這裡了解更多信息。
除此之外，我們將從頭開始創建所有代碼，以便您可以理解src文件夾中的所有內容。
React文檔將JSX定義為“JavaScript的語法擴展”，它使編寫React組件變得容易。使用JSX，我們可以像處理標準JavaScript值一樣傳遞HTML結構或React元素。
這是一個簡單的例子：
<code>create-react-app message-app</code>
注意這一行const message = <h1>I'm a heading</h1>;。這就是JSX。如果您嘗試在Web瀏覽器中運行它，它會給您一個錯誤。但是，在React應用程序中，JSX由轉換器（例如Babel）解釋，並渲染為React可以理解的JavaScript代碼。
注意：您可以在我們的教程“JSX入門”中了解更多關於JSX的信息。
過去，React JSX文件曾經使用.jsx文件擴展名。現在，Create React App工具使用.js文件擴展名生成React文件。雖然仍然支持.jsx文件擴展名，但React維護者建議使用.js。但是，還有一組反對的React開發人員（包括我自己），他們更喜歡使用.jsx擴展名，原因如下：
但是，在本教程中，我將遵守Create React App提供的內容，並堅持使用.js文件結尾。
讓我們開始編寫一些代碼。在新建的message-app的src文件夾中，創建一個index.js文件並添加以下代碼：
<code>npm i -g create-react-app</code>
再次使用npm start或yarn start啟動開發服務器。您的瀏覽器應該顯示以下內容：
這是最基本的“Hello World”React示例。 index.js文件是項目的根目錄，React組件將在其中呈現。讓我解釋一下代碼是如何工作的：
<h1>Hello World</h1>：一個JSX元素document.getElementById('root')：一個HTML容器（JSX元素將在此處呈現）。 HTML容器位於public/index.html文件中。在第31行，您應該看到<div></div>。這被稱為根DOM節點，因為其中的所有內容都將由React虛擬DOM管理。
雖然JSX看起來很像HTML，但有一些關鍵區別。例如，您不能使用class屬性，因為它是一個JavaScript關鍵字。相反，使用className代替。此外，諸如onclick之類的事件在JSX中拼寫為onClick。現在讓我們修改我們的Hello World代碼：
<code>npm i -g create-react-app</code>
我已經將JSX代碼移到名為element的常量變量中。我還將h1標籤替換為div標籤。為了使JSX工作，您需要將元素包裝在一個父標籤中。
看看下面的例子：
<code>create-react-app message-app</code>
上面的代碼不起作用。您將收到一個語法錯誤，指示您必須將相鄰的JSX元素包含在封閉標籤中。像這樣：
<code>npx i -g create-react-app</code>
如何在JSX中計算JavaScript表達式？很簡單。只需使用花括號，如下所示：
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>……或者像這樣：
<code>cd message-app npm start</code>
更新您的代碼並確認瀏覽器顯示“Hello, Jane Doe”。嘗試其他示例，例如{5 2}<code>{5 2}。既然您已經掌握了JSX的基礎知識，讓我們繼續創建一個React組件。
上面的例子是一種簡單的方法，向您展示了ReactDOM.render()是如何工作的。通常，我們將所有項目邏輯封裝在React組件中，然後將其傳遞給ReactDOM.render函數。
在src文件夾中，創建一個名為App.js的文件並鍵入以下代碼：
<code>.... Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use yarn build.</code>
在這裡，我們通過定義一個JavaScript類來創建一個React組件，該類是React.Component的子類。我們還定義了一個render函數，該函數返回一個JSX元素。您可以將其他JSX代碼放在<div><code><div>標籤中。接下來，使用以下代碼更新src/index.js，以便在瀏覽器中看到反映的更改：
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>{
"name": "message-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>
<p>首先，我們導入App組件。然後我們使用JSX格式呈現App，如下所示：<code><App/><code><App/>。這是必需的，以便JSX可以將其編譯為可以推送到React DOM的元素。保存更改後，查看您的瀏覽器以確保它呈現正確的消息。
接下來，我們將了解如何應用樣式。
有各種方法可以設置React組件的樣式。在本教程中，我們將介紹兩種方法：
以下是我們如何實現JSX內聯樣式的示例：
import React from 'react';
export default function App() {
const message = <h1>I'm a heading</h1>; //JSX FTW!
return ( message );
}React樣式看起來很像常規CSS，但有一些關鍵區別。例如，headerStyle是一個對象文字。我們不能像平時那樣使用分號。此外，為了使它們與JavaScript語法兼容，許多CSS聲明已經更改。例如，我們使用textDecoration代替text-decoration。基本上，對於所有CSS鍵都使用駝峰式命名法，但供應商前綴（如WebkitTransition）除外，供應商前綴必須以大寫字母開頭。
我們也可以這樣實現樣式：
<code>npm i -g create-react-app</code>
第二種方法是使用外部樣式表。默認情況下，已經支持外部CSS樣式表。如果您想使用Sass等預處理器，請查閱文檔以了解如何配置它。
在src文件夾中，創建一個名為App.css的文件並鍵入以下代碼：
<code>create-react-app message-app</code>
在src/App.js文件頂部的添加以下導入語句：
<code>npx i -g create-react-app</code>
保存後，您應該會看到瀏覽器上的文本內容大小發生了巨大變化。您也可以使用CSS類，如下所示：
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>按如下方式更新src/App.js：
<code>cd message-app npm start</code>
我們不能使用HTML的class屬性，因為它是一個保留的JavaScript關鍵字。相反，我們使用className。以下是您預期的輸出：
既然您已經學習瞭如何向React項目添加樣式，讓我們繼續學習無狀態和有狀態React組件。
無狀態組件，也稱為啞組件，只是一個顯示信息的組件。它不包含任何操作數據的邏輯。它可以接收來自用戶的事件，然後將其傳遞給父容器進行處理。
創建文件message-view.js並將以下示例代碼複製到其中。這是一個啞組件的完美示例（儘管從技術上講它更像是一個靜態組件）：
<code>.... Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use yarn build.</code>
接下來，使用以下代碼向src/App.css添加一些基本樣式：
{
"name": "message-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}最後，修改src/App.js，使整個文件如下所示：
import React from 'react';
export default function App() {
const message = <h1>I'm a heading</h1>; //JSX FTW!
return ( message );
}到目前為止，代碼應該非常容易理解，因為我已經解釋了到目前為止涉及的概念。現在查看您的瀏覽器，您應該得到以下結果：
我們之前提到過，React同時提供基於類和基於函數的組件。我們可以使用函數語法重寫MessageView，如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));請注意，我已經刪除了Component導入，因為在函數語法中不需要它。這種樣式一開始可能會令人困惑，但您很快就會了解到，這樣編寫React組件的速度更快。
此外，隨著React Hooks的出現，這種編寫React組件的樣式越來越流行。
您已經成功創建了一個無狀態React組件。但是，它還不完整，因為它還需要做一些額外的工作才能與有狀態組件或容器正確集成。目前，MessageView顯示的是靜態數據。我們需要修改它，以便它可以接受輸入參數。我們使用所謂的props來實現這一點——我們將從父組件傳遞下來的數據。
首先，像這樣更改MessageView組件：
<code>npm i -g create-react-app</code>
這裡需要注意的主要內容是我們如何定義message變量。我們將其賦值為this.props.message，我們將從有狀態的父組件傳遞下來。然後，在我們的JSX中，我們可以引用我們的message變量並將其輸出到頁面。
現在讓我們為MessageView創建一個父組件。創建一個名為message-list.js的新文件並添加以下代碼：
<code>create-react-app message-app</code>
在這裡，我們使用state來存儲一個包含我們消息的對象。 React的魔力在於，當state對象發生變化時，組件將重新渲染（從而更新UI）。
然後，在我們的JSX中，我們將state對象的message屬性傳遞給MessageView組件。
最後一步是更新我們的App組件以呈現新的有狀態MessageList組件，而不是無狀態的MessageView組件：
<code>npx i -g create-react-app</code>
保存更改後，檢查您的瀏覽器以查看結果。
花點時間確保您理解發生了什麼。我們在（有狀態）MessageList組件中聲明一個state對象。該對象的message屬性包含我們的消息。在我們的render函數中，我們可以使用所謂的props將該消息傳遞給我們的（無狀態）子組件。
在（無狀態）MessageView組件中，我們可以使用this.props.message訪問該消息。然後，我們可以將此值傳遞給我們的JSX以渲染到頁面。
呼！
隨著應用程序的增長以及數據作為props來回傳遞，驗證組件是否接收了它們期望的數據類型將非常有用。
幸運的是，我們可以使用prop-types包來實現這一點。要快速查看它的實際示例，請按如下方式更改我們的MessageView組件：
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>如果缺少message prop，這將導致您的React應用程序報錯。如果組件接收的對像不是對象，它也會導致報錯。
您可以通過像這樣更改父組件的狀態來嘗試：
<code>cd message-app npm start</code>
返回您的瀏覽器並打開控制台。您應該看到以下內容記錄在控制台中：
<code>.... Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use yarn build.</code>
現在讓我們看看如何使用MessageView實例顯示多條消息。這就是React開始閃光的地方，因為它使代碼重用變得非常容易（您將看到）。
首先，我們將state.message更改為數組並將其重命名為messages。然後，我們將使用JavaScript的map函數生成多個MessageView組件實例，每個實例對應於state.messages數組中的一個消息。
我們還需要使用一個名為key的特殊屬性填充一個唯一值，例如id。 React需要這個來跟踪列表中哪些項目已更改、添加或刪除。
按如下方式更新MessageList代碼：
{
"name": "message-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}檢查您的瀏覽器以查看結果：
如您所見，使用React定義構建塊以創建功能強大且複雜的UI界面很容易。
Hooks是React的最新版本，但它們正在席捲React世界。簡單來說，它們使將React函數組件添加狀態（以及其他功能）成為可能。
我將通過將MessageView組件重構為函數組件來結束本教程，該組件使用React Hooks管理其狀態。請注意，只有在使用React v16.8及更高版本時才有可能。
<code>npm i -g create-react-app</code>
在上面的示例中，我已經用useState React Hook替換了state對象。顧名思義，這允許您管理組件的狀態。
使用Hooks將幫助您在處理大型項目時避免所謂的prop drilling。 Prop drilling會讓您將props傳遞給多個組件（最終不需要這些數據），只是為了到達一個深度嵌套的組件。
我們還可以將MessageView組件轉換為函數組件：
<code>create-react-app message-app</code>
請注意，我們現在如何在組件中接收message prop：
<code>npx i -g create-react-app</code>
這利用了一種稱為對象解構的技術，它允許您從數組或對像中提取單個項目，並將它們使用簡寫語法放入變量中。
我們在這裡也採用同樣的技術，從message對像中獲取我們需要的值，並避免在所有內容前加上message：
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>就是這樣！
我不打算在本篇文章中進一步介紹React Hooks，只是讓您知道它們的存在，並且它們在React社區中越來越受歡迎。如果您想了解更多關於Hooks的信息，請閱讀我們的React Hooks入門指南。
這是一個您可以使用的實時演示：
我們現在已經完成了本入門指南。還有很多React概念我沒有涵蓋，例如數據獲取、錯誤處理、路由、使用表單、調試等等。列表還在繼續……
好消息是，我們在SitePoint Premium上有很多很棒的React內容，以及我們博客上的許多優秀文章。我鼓勵您查看它們並構建一些很棒的東西。
在開始學習React之前，掌握紮實的JavaScript知識非常重要，因為React是一個JavaScript庫。您應該熟悉ES6特性、閉包、異步編程和this關鍵字等概念。 HTML和CSS知識也是必不可少的，因為您將使用JSX，這是一種類似於HTML的JavaScript語法擴展。熟悉Node.js和npm（Node包管理器）也很有益，因為它們通常用於React開發中的包管理和執行腳本。
要為React設置開發環境，您首先需要安裝Node.js和npm。安裝完成後，您可以使用Create React App命令行工具創建一個新的React應用程序。它設置您的開發環境，以便您可以使用最新的JavaScript特性，提供良好的開發體驗，並優化您的應用程序以用於生產。您還需要一個文本編輯器，如Visual Studio Code和一個Web瀏覽器來測試您的應用程序。
JSX代表JavaScript XML。它是Facebook開發的JavaScript語法擴展，允許我們在React中編寫HTML。 JSX使在React中編寫和添加HTML變得更容易。沒有它，您的JavaScript代碼將難以閱讀和編寫。它還有助於使代碼模塊化，更容易理解和維護。
組件是任何React應用程序的構建塊。 React中的組件是一段可重用的代碼，它控制UI的一部分。每個組件都是獨立的，可以組合起來創建複雜的UI。 React組件通常用JSX編寫，並且可以維護自己的狀態和props。
在React中，狀態和props都是JavaScript對象。雖然它們都保存影響render輸出的信息，但在組件方面，它們的功能不同。 Props（屬性的縮寫）是將數據從父組件傳遞到子組件的一種方式，它們是只讀的，不應由子組件更改。另一方面，狀態是在組件內部管理的，可以在組件內部更改。
React事件使用camelCase命名，而不是小寫。使用JSX時，您將函數作為事件處理程序傳遞，而不是字符串。例如，HTML click事件在JSX中寫為onClick。 React還有一個合成事件系統，這意味著它有自己的事件系統，與W3C事件系統完全兼容。
React中的鍵用於識別其對應的驅動渲染數據的唯一虛擬DOM元素。它們幫助React通過循環使用現有的DOM元素來優化渲染。鍵必須是唯一的數字或字符串，使用重複的鍵可能會破壞您的應用程序。
上下文API是React提供的組件結構，它使我們能夠在應用程序的所有級別共享特定形式的數據。它的目標是解決prop drilling的問題。
Redux是一個可預測的狀態容器，旨在幫助您編寫JavaScript應用程序，這些應用程序在客戶端、服務器和原生環境中都能始終如一地運行，並且易於測試。雖然它主要用作React的狀態管理工具，但您可以將其與任何其他JavaScript框架或庫一起使用。
Hooks是React 16.8中新增的功能，允許您在不編寫類的情況下使用狀態和其他React功能。 Hooks是函數，允許您從函數組件“鉤入”React狀態和生命週期功能。它們不能在類中工作——它們允許您在沒有類的情況下使用React。
請注意，以上內容對原文進行了改寫和潤色，力求在不改變原意的情況下提高可讀性和流暢性。 圖片格式保持不變。 由於無法直接訪問網絡圖片，圖片鏈接保持原樣。
以上是React入門：初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
