React簡介入門教程
更新時(shí)間：2026年02月27日 09:29:55 作者：BUG 飼養(yǎng)員
本文總結(jié)了React的基礎(chǔ)知識點(diǎn),包括環(huán)境搭建、核心概念（JSX、組件、props、state、事件處理、條件渲染、列表渲染）以及組件進(jìn)階（生命周期、Hooks、通信）,適合零基礎(chǔ)開發(fā)者學(xué)習(xí),涵蓋理論與實(shí)操,適合React項(xiàng)目的開發(fā)和維護(hù),感興趣的朋友跟隨小編一起看看吧
1. 前言
React是Facebook（現(xiàn)Meta）推出的開源前端框架，基于組件化思想和虛擬DOM技術(shù)，已成為現(xiàn)代前端開發(fā)的主流技術(shù)之一，廣泛應(yīng)用于單頁面應(yīng)用（SPA）、移動(dòng)端應(yīng)用（React Native）開發(fā)。本文匯總?cè)W(wǎng)優(yōu)質(zhì)React基礎(chǔ)資源，從環(huán)境搭建、核心概念到實(shí)戰(zhàn)案例，循序漸進(jìn)講解React基礎(chǔ)知識點(diǎn)，兼顧理論與實(shí)操，適合零基礎(chǔ)入門開發(fā)者學(xué)習(xí)。
2. React簡介與核心優(yōu)勢
2.1 React是什么
React是一個(gè)用于構(gòu)建用戶界面（UI）的JavaScript庫，核心思想是“組件化”和“聲明式編程”。與傳統(tǒng)的命令式編程（手動(dòng)操作DOM）不同，React采用聲明式語法，開發(fā)者只需描述UI的最終狀態(tài)，React會(huì)自動(dòng)處理DOM的更新，大幅提升開發(fā)效率。
React的設(shè)計(jì)理念是“一次學(xué)習(xí)，隨處編寫”，不僅可以用于Web端開發(fā)，還能通過React Native開發(fā)移動(dòng)端應(yīng)用（iOS/Android），通過React Server Components開發(fā)服務(wù)端渲染（SSR）應(yīng)用，生態(tài)極其豐富。
2.2 React核心優(yōu)勢
- 組件化開發(fā)：將復(fù)雜UI拆分為獨(dú)立的可復(fù)用組件，降低代碼耦合度，提升代碼可維護(hù)性和復(fù)用性。
- 虛擬DOM（Virtual DOM）：React不直接操作真實(shí)DOM，而是通過虛擬DOM（JavaScript對象）描述DOM結(jié)構(gòu)，通過Diff算法計(jì)算最小更新范圍，減少DOM操作，提升頁面性能。
- 聲明式編程：只需關(guān)注“UI應(yīng)該是什么樣子”，無需關(guān)注“如何實(shí)現(xiàn)UI更新”，代碼更簡潔、易讀。
- 單向數(shù)據(jù)流：數(shù)據(jù)從父組件流向子組件，狀態(tài)管理清晰，避免數(shù)據(jù)混亂，便于調(diào)試。
- 豐富的生態(tài)系統(tǒng)：擁有React Router（路由）、Redux（狀態(tài)管理）、Ant Design（UI組件庫）等成熟工具，降低開發(fā)成本。
- 跨平臺能力：通過React Native、Electron等工具，可快速實(shí)現(xiàn)多端應(yīng)用開發(fā)，復(fù)用Web端代碼。
2.3 React與其他框架對比（Vue/Angular）
| 框架 | 核心特點(diǎn) | 優(yōu)勢 | 適用場景 |
|---|---|---|---|
| React | 組件化、虛擬DOM、單向數(shù)據(jù)流、Hooks | 生態(tài)豐富、跨平臺能力強(qiáng)、靈活性高、適合復(fù)雜應(yīng)用 | 中大型Web應(yīng)用、移動(dòng)端應(yīng)用、SSR應(yīng)用 |
| Vue | 漸進(jìn)式框架、雙向綁定、模板語法、Composition API | 上手簡單、文檔友好、輕量高效、適合快速開發(fā) | 中小型Web應(yīng)用、快速原型開發(fā) |
| Angular | 完整框架、TypeScript支持、依賴注入、雙向綁定 | 功能全面、規(guī)范性強(qiáng)、適合大型企業(yè)級應(yīng)用 | 大型企業(yè)級Web應(yīng)用、團(tuán)隊(duì)協(xié)作項(xiàng)目 |
| 總結(jié)：零基礎(chǔ)入門可優(yōu)先選擇React或Vue，React的組件化思想和生態(tài)更適合長期發(fā)展，Vue上手門檻更低；Angular適合有TypeScript基礎(chǔ)、開發(fā)大型企業(yè)級應(yīng)用的場景。 |
3. 開發(fā)環(huán)境搭建（零基礎(chǔ)入門）
3.1 前置環(huán)境準(zhǔn)備（Node.js/npm）
React開發(fā)依賴Node.js和npm（包管理工具），無論采用哪種搭建方式，都需要先安裝Node.js。
- 下載Node.js：訪問Node.js官網(wǎng)，下載LTS版本（長期支持版，推薦16.x或18.x），安裝過程默認(rèn)下一步即可。
- 驗(yàn)證安裝：打開終端（Windows：CMD/PowerShell；Mac：終端），輸入以下命令，若能顯示版本號則安裝成功。
# 查看Node.js版本 node -v # 查看npm版本 npm -v
- （可選）安裝cnpm（淘寶鏡像）：由于npm默認(rèn)鏡像在國外，下載速度較慢，可安裝cnpm加速包下載。
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.2 兩種搭建方式（CDN引入+Create React App）
React有兩種入門搭建方式，適合不同場景：CDN引入適合快速原型開發(fā)、零基礎(chǔ)體驗(yàn)；Create React App適合正式項(xiàng)目開發(fā)，自動(dòng)配置好工程化環(huán)境。
3.2.1 方式一：CDN引入（快速體驗(yàn)）
無需搭建復(fù)雜工程，直接在HTML文件中引入React和ReactDOM的CDN鏈接，即可編寫React代碼。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>React CDN入門</title>
<!-- 引入React核心庫 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- 引入ReactDOM（用于渲染DOM） -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 引入Babel（用于解析JSX語法） -->
<script src="https://unpkg.com/@babel/standalone@7.23.2/babel.min.js"></script>
</head>
<body>
<!-- React渲染的容器 -->
<div id="root"></div>
<script type="text/babel">
// 編寫React代碼（JSX語法）
const App = () => {
return <h1>Hello, React!</h1>;
};
// 渲染組件到DOM容器中
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>說明：1. type="text/babel"是必須的，用于告訴瀏覽器用Babel解析JSX語法；2. 開發(fā)環(huán)境用development.js，生產(chǎn)環(huán)境需替換為production.min.js（壓縮版，提升性能）。
3.2.2 方式二：Create React App（正式項(xiàng)目）
Create React App（CRA）是React官方推薦的項(xiàng)目腳手架，自動(dòng)配置好Webpack、Babel、ESLint等工具，無需手動(dòng)配置，開箱即用。
# 1. 全局安裝Create React App（僅首次需要） npm install -g create-react-app # 2. 創(chuàng)建React項(xiàng)目（項(xiàng)目名自定義，如react-basic-demo） create-react-app react-basic-demo # 3. 進(jìn)入項(xiàng)目目錄 cd react-basic-demo # 4. 啟動(dòng)項(xiàng)目 npm start
啟動(dòng)成功后，瀏覽器會(huì)自動(dòng)打開http://localhost:3000，看到React默認(rèn)頁面即表示項(xiàng)目搭建成功。
3.3 項(xiàng)目目錄結(jié)構(gòu)解析（CRA創(chuàng)建的項(xiàng)目）
CRA創(chuàng)建的項(xiàng)目目錄結(jié)構(gòu)清晰，核心文件如下（精簡版，忽略無關(guān)文件）：
react-basic-demo/ ├── node_modules/ # 項(xiàng)目依賴包（自動(dòng)生成） ├── public/ # 靜態(tài)資源目錄 │ ├── index.html # 入口HTML文件（React渲染的容器） │ └── favicon.ico # 項(xiàng)目圖標(biāo) ├── src/ # 核心代碼目錄（開發(fā)重點(diǎn)） │ ├── App.js # 根組件（整個(gè)應(yīng)用的入口組件） │ ├── App.css # App組件的樣式文件 │ ├── index.js # 入口JS文件（渲染根組件到DOM） │ └── index.css # 全局樣式文件 ├── .gitignore # Git忽略文件 ├── package.json # 項(xiàng)目配置文件（依賴、腳本） └── README.md # 項(xiàng)目說明文檔
核心文件說明：
- public/index.html：唯一的HTML文件，React所有組件都會(huì)渲染到該文件的
<div id="root"></div>中。 - src/index.js：入口JS文件，負(fù)責(zé)將根組件（App.js）渲染到HTML的root容器中。
- src/App.js：根組件，所有其他組件都會(huì)作為它的子組件，是整個(gè)應(yīng)用的核心。
3.4 啟動(dòng)與運(yùn)行項(xiàng)目
在項(xiàng)目目錄中，執(zhí)行以下命令即可啟動(dòng)/打包項(xiàng)目：
# 啟動(dòng)開發(fā)服務(wù)器（熱更新，修改代碼實(shí)時(shí)生效） npm start # 打包項(xiàng)目（生成生產(chǎn)環(huán)境代碼，用于部署） npm run build # 運(yùn)行測試（可選） npm test # eject配置（可選，暴露Webpack等配置，一旦執(zhí)行無法撤銷） npm run eject
注意：npm run eject會(huì)暴露項(xiàng)目的Webpack、Babel等配置文件，適合需要自定義配置的場景，零基礎(chǔ)入門不建議執(zhí)行，避免破壞默認(rèn)配置。
4. React核心概念（必學(xué)）
4.1 JSX語法詳解
JSX（JavaScript XML）是React的核心語法，允許在JavaScript中編寫HTML-like代碼，本質(zhì)是JavaScript的語法擴(kuò)展，最終會(huì)被Babel編譯為普通的JavaScript代碼。
4.1.1 JSX基本語法
// 簡單JSX示例（在函數(shù)組件中使用）
const App = () => {
// JSX語法：類似HTML，但寫在JavaScript中
return (
<div className="app">
<h1>React基礎(chǔ)教程</h1>
<p>JSX語法入門示例</p>
</div>
);
};
export default App;
4.1.2 JSX核心規(guī)則（必記）
- 標(biāo)簽必須閉合：HTML中可省略閉合的標(biāo)簽（如
），JSX中必須閉合（
）。
- 標(biāo)簽必須閉合：HTML中可省略閉合的標(biāo)簽（如
- className替代class：HTML中用class定義樣式類，JSX中用className（因?yàn)閏lass是JavaScript的關(guān)鍵字）。
- 內(nèi)聯(lián)樣式用對象：JSX中內(nèi)聯(lián)樣式不能直接寫字符串，需用JavaScript對象，屬性名采用駝峰命名法（如fontSize替代font-size）。
// 內(nèi)聯(lián)樣式示例
const App = () => {
// 定義樣式對象
const style = {
fontSize: '18px', // 駝峰命名法
color: '#333',
margin: '20px 0'
};
return (
<div style={style}>
<h1 style={{ color: 'red', fontWeight: 'bold' }}>內(nèi)聯(lián)樣式示例</h1>
</div>
);
};- 嵌入JavaScript表達(dá)式：用
{}包裹JavaScript表達(dá)式（變量、函數(shù)調(diào)用、三元運(yùn)算等），不能嵌入語句（if/for等）。
- 嵌入JavaScript表達(dá)式：用
const App = () => {
const name = 'React';
const isShow = true;
// 嵌入變量、三元運(yùn)算
return (
<div>
<p>Hello, {name}!</p>
{isShow ? <p>顯示內(nèi)容</p> : <p>隱藏內(nèi)容</p>}
<p>1+1={1+1}</p> {/* 嵌入表達(dá)式 */}
</div>
);
};
- 多標(biāo)簽必須有根節(jié)點(diǎn)：JSX中如果有多個(gè)標(biāo)簽，必須用一個(gè)根節(jié)點(diǎn)包裹（如div、Fragment），F(xiàn)ragment（<></>）是無渲染節(jié)點(diǎn)，不會(huì)生成額外的DOM。
// 正確：用Fragment包裹多標(biāo)簽
const App = () => {
return (
<>
<h1>標(biāo)題</h1>
<p>內(nèi)容</p>
</>
);
};
// 錯(cuò)誤：無根節(jié)點(diǎn)
const App = () => {
return (
<h1>標(biāo)題</h1>
<p>內(nèi)容</p>
);
};4.2 組件基礎(chǔ)（函數(shù)組件vs類組件）
組件是React的核心，將UI拆分為獨(dú)立的、可復(fù)用的單元，每個(gè)組件負(fù)責(zé)渲染一部分UI，接收輸入（props），返回需要渲染的JSX。React中的組件分為兩種：函數(shù)組件和類組件，目前React官方推薦使用函數(shù)組件（搭配Hooks）。
4.2.1 函數(shù)組件（推薦）
函數(shù)組件是最簡單的組件形式，本質(zhì)是一個(gè)JavaScript函數(shù)，接收props參數(shù)，返回JSX。
// 簡單函數(shù)組件
function Welcome() {
return <h1>歡迎學(xué)習(xí)React</h1>;
}
// 箭頭函數(shù)形式（更簡潔，推薦）
const Welcome = () => {
return <h1>歡迎學(xué)習(xí)React</h1>;
};
// 導(dǎo)出組件（供其他組件引入使用）
export default Welcome;使用組件：引入組件后，像使用HTML標(biāo)簽一樣使用即可。
import Welcome from './Welcome';
const App = () => {
return (
<div>
<Welcome /> {/* 使用Welcome組件 */}
</div>
);
};4.2.2 類組件（傳統(tǒng)方式）
類組件是基于ES6類的組件，需要繼承React.Component，必須實(shí)現(xiàn)render()方法，render()方法返回JSX。
// 引入React
import React from 'react';
// 類組件
class Welcome extends React.Component {
// 必須實(shí)現(xiàn)render方法
render() {
return <h1>歡迎學(xué)習(xí)React</h1>;
}
}
export default Welcome;4.2.3 兩種組件對比
| 組件類型 | 優(yōu)點(diǎn) | 缺點(diǎn) | 適用場景 |
|---|---|---|---|
| 函數(shù)組件 | 語法簡潔、易維護(hù)、支持Hooks、性能更優(yōu) | 早期不支持狀態(tài)管理（需Hooks） | 所有場景（React 16.8+推薦） |
| 類組件 | 支持狀態(tài)管理、生命周期方法 | 語法繁瑣、代碼冗余、不支持Hooks | 舊項(xiàng)目維護(hù)、需要使用傳統(tǒng)生命周期的場景 |
| 注意：React 16.8版本引入Hooks后，函數(shù)組件可以實(shí)現(xiàn)類組件的所有功能，且更簡潔，因此新項(xiàng)目優(yōu)先使用函數(shù)組件。 |
4.3 組件props（數(shù)據(jù)傳遞）
props（properties）是組件的輸入，用于父組件向子組件傳遞數(shù)據(jù)，是組件間通信的最基礎(chǔ)方式。props是只讀的，子組件不能修改props的值（單向數(shù)據(jù)流）。
4.3.1 props基本使用
// 子組件：接收props參數(shù)
const Welcome = (props) => {
// 從props中獲取傳遞過來的數(shù)據(jù)
return (
<div>
<h1>歡迎 {props.name} 學(xué)習(xí)React</h1>
<p>年齡：{props.age}</p>
<p>性別：{props.gender}</p>
</div>
);
};
// 父組件：向子組件傳遞props
const App = () => {
return (
<div>
{/* 像HTML屬性一樣傳遞數(shù)據(jù) */}
<Welcome name="小明" age={18} gender="男" />
</div>
);
};4.3.2 props默認(rèn)值與類型校驗(yàn)
為了提升代碼健壯性，可給props設(shè)置默認(rèn)值，同時(shí)進(jìn)行類型校驗(yàn)（需安裝prop-types包）。
// 安裝prop-types（用于類型校驗(yàn)）
// npm install prop-types
import PropTypes from 'prop-types';
const Welcome = (props) => {
return (
<div>
<h1>歡迎 {props.name} 學(xué)習(xí)React</h1>
<p>年齡：{props.age}</p>
</div>
);
};
// 設(shè)置props默認(rèn)值
Welcome.defaultProps = {
name: '未知用戶',
age: 18
};
// 類型校驗(yàn)（指定props的類型）
Welcome.propTypes = {
name: PropTypes.string, // name必須是字符串
age: PropTypes.number, // age必須是數(shù)字
gender: PropTypes.string // gender必須是字符串（可選）
};
export default Welcome;4.3.3 props傳遞函數(shù)（父組件接收子組件數(shù)據(jù)）
props不僅可以傳遞數(shù)據(jù)，還可以傳遞函數(shù)，子組件通過調(diào)用該函數(shù)，向父組件傳遞數(shù)據(jù)（實(shí)現(xiàn)子傳父通信）。
// 子組件：調(diào)用props傳遞的函數(shù)，傳遞數(shù)據(jù)
const Child = (props) => {
const handleClick = () => {
// 向父組件傳遞數(shù)據(jù)
props.onSendData('我是子組件的數(shù)據(jù)');
};
return <button onClick={handleClick}>向父組件傳遞數(shù)據(jù)</button>;
};
// 父組件：定義函數(shù)，接收子組件傳遞的數(shù)據(jù)
const Parent = () => {
const receiveData = (data) => {
console.log('接收子組件的數(shù)據(jù)：', data);
};
return <Child onSendData={receiveData} />;
};4.4 組件state與setState（狀態(tài)管理）
state是組件內(nèi)部的狀態(tài)，用于管理組件自身的數(shù)據(jù)，當(dāng)state發(fā)生變化時(shí)，組件會(huì)重新渲染（更新UI）。與props不同，state是組件內(nèi)部的，可修改（但需通過setState方法）。
4.4.1 函數(shù)組件中使用state（useState Hook）
函數(shù)組件通過useState Hook管理state，useState接收初始值，返回一個(gè)數(shù)組，第一個(gè)元素是state值，第二個(gè)元素是修改state的函數(shù)（setState）。
// 引入useState Hook
import { useState } from 'react';
const Counter = () => {
// 定義state：count（初始值為0），setCount（修改count的函數(shù)）
const [count, setCount] = useState(0);
// 點(diǎn)擊按鈕，修改count
const handleIncrement = () => {
// 方式1：直接傳遞新值
setCount(count + 1);
// 方式2：接收prevState（上一次的state值），適合依賴上一次state的場景
// setCount(prevCount => prevCount + 1);
};
return (
<div>
<p>當(dāng)前計(jì)數(shù)：{count}</p>
<button onClick={handleIncrement}>點(diǎn)擊加1</button>
</div>
);
};
export default Counter;4.4.2 類組件中使用state
import React from 'react';
class Counter extends React.Component {
// 初始化state
constructor(props) {
super(props);
this.state = {
count: 0
};
}
handleIncrement() {
// 類組件中修改state必須用setState方法，不能直接修改this.state
this.setState({
count: this.state.count + 1
});
// 依賴上一次state的場景，用函數(shù)形式
// this.setState(prevState => ({
// count: prevState.count + 1
// }));
}
render() {
return (
<div>
<p>當(dāng)前計(jì)數(shù)：{this.state.count}</p>
<button onClick={() => this.handleIncrement()}>點(diǎn)擊加1</button>
</div>
);
}
}4.4.3 setState注意事項(xiàng)
- setState是異步的：React會(huì)批量處理setState調(diào)用，避免頻繁更新DOM，因此修改后不能立即獲取最新的state值。
- 不能直接修改state：無論是函數(shù)組件還是類組件，都不能直接修改state（如
count = count + 1、this.state.count = 1），必須通過setState方法修改，否則組件不會(huì)重新渲染。
- 不能直接修改state：無論是函數(shù)組件還是類組件，都不能直接修改state（如
- 批量更新：多次調(diào)用setState會(huì)被合并為一次更新，提升性能。
// 異步示例
const Counter = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
console.log(count); // 輸出0（不是最新值），因?yàn)閟etState是異步的
};
return (
<div>
<p>{count}</p>
<button onClick={handleClick}>點(diǎn)擊</button>
</div>
);
};4.5 事件處理（React事件機(jī)制）
React事件是基于原生DOM事件的封裝，語法與原生DOM事件類似，但有一些區(qū)別，核心是“事件委托”（將事件綁定到根節(jié)點(diǎn)，提升性能）。
4.5.1 React事件基本使用
const EventDemo = () => {
// 定義事件處理函數(shù)
const handleClick = () => {
alert('按鈕被點(diǎn)擊了');
};
// 綁定點(diǎn)擊事件（注意：是onClick，駝峰命名法，不是onclick）
return <button onClick={handleClick}>點(diǎn)擊我</button>;
};4.5.2 事件傳遞參數(shù)
const EventDemo = () => {
// 事件處理函數(shù)接收參數(shù)
const handleClick = (name) => {
alert(`歡迎 ${name}`);
};
// 方式1：通過箭頭函數(shù)傳遞參數(shù)
return (
<div>
<button onClick={() => handleClick('React')}>點(diǎn)擊1</button>
<button onClick={() => handleClick('Vue')}>點(diǎn)擊2</button>
</div>
);
};4.5.3 事件對象（e）
React事件對象是原生DOM事件對象的封裝（SyntheticEvent），擁有原生事件對象的大部分屬性和方法（如target、preventDefault、stopPropagation）。
const EventDemo = () => {
const handleClick = (e) => {
// 阻止默認(rèn)行為（如表單提交、a標(biāo)簽跳轉(zhuǎn)）
e.preventDefault();
// 獲取事件目標(biāo)（觸發(fā)事件的元素）
console.log(e.target);
// 阻止事件冒泡
e.stopPropagation();
};
return (
<a rel="external nofollow" onClick={handleClick}>
點(diǎn)擊不跳轉(zhuǎn)
</a>
);
};4.5.4 React事件與原生DOM事件的區(qū)別
- 命名方式：React事件采用駝峰命名法（onClick、onChange），原生DOM事件采用小寫（onclick、onchange）。
- 事件綁定：React事件綁定的是函數(shù)引用，原生DOM事件綁定的是字符串（如οnclick=“handleClick()”）。
- 事件對象：React事件對象是SyntheticEvent（合成事件），原生DOM事件對象是Event。
4.6 條件渲染（多種實(shí)現(xiàn)方式）
React中根據(jù)不同的條件渲染不同的UI，常用的實(shí)現(xiàn)方式有4種：三元運(yùn)算符、邏輯與（&&）、if-else、switch-case。
4.6.1 三元運(yùn)算符（推薦，簡潔）
const ConditionDemo = () => {
const isLogin = true;
return (
<div>
{/* 三元運(yùn)算符：條件為true渲染第一個(gè)，false渲染第二個(gè) */}
{isLogin ? <p>歡迎登錄</p> : <p>請先登錄</p>}
</div>
);
};4.6.2 邏輯與（&&）（適合渲染單個(gè)元素）
const ConditionDemo = () => {
const hasMessage = true;
return (
<div>
{/* 邏輯與：條件為true渲染后面的元素，false不渲染 */}
{hasMessage && <p>您有一條新消息</p>}
</div>
);
};
4.6.3 if-else（適合復(fù)雜條件）
const ConditionDemo = () => {
const role = 'admin';
// 定義渲染函數(shù)，根據(jù)條件返回不同的JSX
const renderContent = () => {
if (role === 'admin') {
return <p>管理員界面</p>;
} else if (role === 'user') {
return <p>普通用戶界面</p>;
} else {
return <p>游客界面</p>;
}
};
return <div>{renderContent()}</div>;
};4.7 列表渲染（key的作用與注意事項(xiàng)）
React中渲染列表時(shí)，需使用map()方法遍歷數(shù)組，生成多個(gè)組件，同時(shí)必須給每個(gè)列表項(xiàng)添加key屬性（唯一標(biāo)識），否則會(huì)出現(xiàn)警告，影響性能。
4.7.1 列表渲染基本示例
const ListDemo = () => {
// 模擬列表數(shù)據(jù)
const list = [
{ id: 1, name: 'React基礎(chǔ)' },
{ id: 2, name: 'React Hooks' },
{ id: 3, name: 'React Router' }
];
return (
<ul>
{/* 遍歷數(shù)組，生成列表項(xiàng) */}
{list.map(item => (
// 必須添加key屬性，且key值唯一
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};4.7.2 key的作用
- 幫助React識別哪些列表項(xiàng)發(fā)生了變化（新增、刪除、修改），從而只更新變化的項(xiàng)，提升渲染性能（避免全量更新）。
- 避免列表項(xiàng)的狀態(tài)混亂（如復(fù)選框選中狀態(tài)、輸入框內(nèi)容）。
4.7.3 key的注意事項(xiàng)
- key必須唯一：不能重復(fù)，否則會(huì)出現(xiàn)警告。
- key不能用index（索引）：如果列表項(xiàng)會(huì)新增、刪除、排序，用index作為key會(huì)導(dǎo)致React誤判，影響性能和狀態(tài)。
- key應(yīng)與數(shù)據(jù)綁定：最好使用數(shù)據(jù)的唯一標(biāo)識（如id、uuid）作為key。
// 錯(cuò)誤：用index作為key（不推薦）
{list.map((item, index) => (
<li key={index}>{item.name}</li>
))}
// 正確：用數(shù)據(jù)的唯一id作為key
{list.map(item => (
<li key={item.id}>{item.name}</li>
))}5. React組件進(jìn)階
5.1 組件生命周期（類組件）
組件生命周期是類組件的核心特性，指組件從創(chuàng)建、渲染、更新到銷毀的整個(gè)過程，每個(gè)階段都有對應(yīng)的鉤子函數(shù)（生命周期方法），用于執(zhí)行特定的邏輯。React 16.3+后的生命周期分為三個(gè)階段：掛載階段、更新階段、卸載階段。
5.1.1 掛載階段（組件創(chuàng)建并渲染到DOM）
執(zhí)行順序：constructor → render → componentDidMount
- constructor：組件初始化，初始化state、綁定事件（如this.handleClick = this.handleClick.bind(this)）。
- render：渲染組件，返回JSX，不能修改state（否則會(huì)陷入無限循環(huán)）。
- componentDidMount：組件掛載完成（已渲染到DOM），適合執(zhí)行副作用操作（如請求數(shù)據(jù)、綁定DOM事件）。
5.1.2 更新階段（組件state或props變化時(shí)）
執(zhí)行順序：shouldComponentUpdate → render → componentDidUpdate
- shouldComponentUpdate：判斷組件是否需要更新，返回true（更新）或false（不更新），可用于優(yōu)化性能（避免不必要的渲染）。
- render：重新渲染組件。
- componentDidUpdate：組件更新完成，可執(zhí)行更新后的操作（如根據(jù)新的props請求數(shù)據(jù)）。
5.1.3 卸載階段（組件從DOM中移除）
componentWillUnmount：組件卸載前執(zhí)行，用于清理副作用（如取消請求、解綁DOM事件），避免內(nèi)存泄漏。
5.1.4 生命周期示例
import React from 'react';
class LifeCycleDemo extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
console.log('1. constructor：組件初始化');
}
componentDidMount() {
console.log('3. componentDidMount：組件掛載完成');
// 模擬請求數(shù)據(jù)
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => console.log('請求到的數(shù)據(jù)：', data));
}
shouldComponentUpdate(nextProps, nextState) {
console.log('4. shouldComponentUpdate：判斷是否更新');
// 只有count大于0時(shí)才更新
return nextState.count > 0;
}
componentDidUpdate(prevProps, prevState) {
console.log('6. componentDidUpdate：組件更新完成');
console.log('上一次的count：', prevState.count);
}
componentWillUnmount() {
console.log('7. componentWillUnmount：組件卸載前');
// 清理操作（如取消請求、解綁事件）
}
handleClick = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
console.log('2. render：組件渲染');
return (
<div>
<p>count：{this.state.count}</p>
<button onClick={this.handleClick}>點(diǎn)擊加1</button>
</div>
);
}
}
export default LifeCycleDemo;注意：函數(shù)組件沒有生命周期方法，可通過useEffect Hook實(shí)現(xiàn)類似的功能。
5.2 函數(shù)組件 Hooks 基礎(chǔ)（useState/useEffect）
Hooks是React 16.8版本引入的新特性，允許函數(shù)組件使用狀態(tài)（state）、生命周期等類組件的功能，無需編寫類組件，語法更簡潔。常用的基礎(chǔ)Hook有useState（狀態(tài)管理）和useEffect（副作用處理）。
5.2.1 useState（已在4.4節(jié)講解，補(bǔ)充說明）
useState用于在函數(shù)組件中聲明狀態(tài)，可聲明多個(gè)狀態(tài)，互不影響。
import { useState } from 'react';
const MultiStateDemo = () => {
// 聲明多個(gè)狀態(tài)
const [name, setName] = useState('React');
const [age, setAge] = useState(18);
const [isShow, setIsShow] = useState(true);
return (
<div>
<p>名稱：{name}</p>
<p>年齡：{age}</p>
{isShow && <p>顯示內(nèi)容</p>}
<button onClick={() => setName('React Hooks')}>修改名稱</button>
</div>
);
};5.2.2 useEffect（副作用處理）
useEffect用于處理函數(shù)組件的副作用（如請求數(shù)據(jù)、綁定事件、修改DOM等），相當(dāng)于類組件的componentDidMount、componentDidUpdate、componentWillUnmount的組合。
import { useState, useEffect } from 'react';
const EffectDemo = () => {
const [data, setData] = useState([]);
// useEffect接收兩個(gè)參數(shù)：回調(diào)函數(shù)、依賴數(shù)組
useEffect(() => {
// 副作用操作：請求數(shù)據(jù)
fetch('https://api.example.com/list')
.then(res => res.json())
.then(data => setData(data));
// 清理函數(shù)（相當(dāng)于componentWillUnmount）
return () => {
// 清理操作：取消請求、解綁事件等
console.log('組件卸載/依賴變化，清理副作用');
};
}, []); // 依賴數(shù)組：空數(shù)組表示只執(zhí)行一次（相當(dāng)于componentDidMount）
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};5.2.3 useEffect依賴數(shù)組的作用
- 空數(shù)組（[]）：回調(diào)函數(shù)只執(zhí)行一次（組件掛載時(shí)），清理函數(shù)在組件卸載時(shí)執(zhí)行。
- 無依賴數(shù)組：回調(diào)函數(shù)在組件掛載和每次更新時(shí)都執(zhí)行，清理函數(shù)在每次更新前執(zhí)行。
- 有依賴數(shù)組（如[name, age]）：回調(diào)函數(shù)在組件掛載時(shí)執(zhí)行，且當(dāng)依賴項(xiàng)（name或age）發(fā)生變化時(shí)執(zhí)行，清理函數(shù)在依賴項(xiàng)變化前或組件卸載時(shí)執(zhí)行。
5.3 組件通信（父子/兄弟/跨層級）
組件通信是React開發(fā)中的核心需求，不同層級的組件通信方式不同，常用的通信方式如下：
5.3.1 父子組件通信（最常用）
- 父傳子：通過props傳遞數(shù)據(jù)/函數(shù)。
- 子傳父：通過props傳遞函數(shù)，子組件調(diào)用函數(shù)傳遞數(shù)據(jù)（已在4.3節(jié)講解）。
到此這篇關(guān)于React簡介入門教程的文章就介紹到這了,更多相關(guān)React基礎(chǔ)教程內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解React開發(fā)中使用require.ensure()按需加載ES6組件
本篇文章主要介紹了詳解React開發(fā)中使用require.ensure()按需加載ES6組件，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了React SSR樣式及SEO的實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家介紹了React?懸浮框內(nèi)容懶加載實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
利用React實(shí)現(xiàn)一個(gè)有點(diǎn)意思的電梯小程序
這篇文章主要為大家詳解介紹了如何利用React實(shí)現(xiàn)一個(gè)有點(diǎn)意思的電梯小程序，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2022-08-08
本篇文章主要介紹了react開發(fā)教程之React組件通信詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
React中的State和Props深入理解及關(guān)鍵區(qū)別
state和props是React中兩個(gè)核心概念,它們共同構(gòu)成了組件的數(shù)據(jù)管理機(jī)制,本文將詳細(xì)探討 state 和 props 的定義、用途、特點(diǎn)以及它們之間的關(guān)鍵區(qū)別,并提供一些最佳實(shí)踐,感興趣的朋友跟隨小編一起看看吧2026-01-01
ReactNative頁面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼
本篇文章主要介紹了ReactNative頁面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
最近看了vueuse的useVirtualList的實(shí)現(xiàn)方式,發(fā)現(xiàn)虛擬滾動(dòng)效果不錯(cuò),就嘗試著同樣的寫法改成react版本,虛擬列表主要包含三部分組成,offset,viewcapacity,overscan,本文就給大家介紹一下React虛擬列表的實(shí)現(xiàn),需要的朋友可以參考下2023-08-08
react-native中路由頁面的跳轉(zhuǎn)與傳參的實(shí)例詳解
這篇文章主要介紹了react-native中路由頁面的跳轉(zhuǎn)與傳參,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
本篇文章主要介紹了React組件通信詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-10-10