React簡介入門教程

更新時間：2026年02月27日 09:29:55 作者：BUG 飼養(yǎng)員

本文總結(jié)了React的基礎(chǔ)知識點,包括環(huán)境搭建、核心概念（JSX、組件、props、state、事件處理、條件渲染、列表渲染）以及組件進(jìn)階（生命周期、Hooks、通信）,適合零基礎(chǔ)開發(fā)者學(xué)習(xí),涵蓋理論與實操,適合React項目的開發(fā)和維護(hù),感興趣的朋友跟隨小編一起看看吧

1. 前言

React是Facebook（現(xiàn)Meta）推出的開源前端框架，基于組件化思想和虛擬DOM技術(shù)，已成為現(xiàn)代前端開發(fā)的主流技術(shù)之一，廣泛應(yīng)用于單頁面應(yīng)用（SPA）、移動端應(yīng)用（React Native）開發(fā)。本文匯總?cè)W(wǎng)優(yōu)質(zhì)React基礎(chǔ)資源，從環(huán)境搭建、核心概念到實戰(zhàn)案例，循序漸進(jìn)講解React基礎(chǔ)知識點，兼顧理論與實操，適合零基礎(chǔ)入門開發(fā)者學(xué)習(xí)。

2. React簡介與核心優(yōu)勢

2.1 React是什么

React是一個用于構(gòu)建用戶界面（UI）的JavaScript庫，核心思想是“組件化”和“聲明式編程”。與傳統(tǒng)的命令式編程（手動操作DOM）不同，React采用聲明式語法，開發(fā)者只需描述UI的最終狀態(tài)，React會自動處理DOM的更新，大幅提升開發(fā)效率。

React的設(shè)計理念是“一次學(xué)習(xí)，隨處編寫”，不僅可以用于Web端開發(fā)，還能通過React Native開發(fā)移動端應(yīng)用（iOS/Android），通過React Server Components開發(fā)服務(wù)端渲染（SSR）應(yīng)用，生態(tài)極其豐富。

2.2 React核心優(yōu)勢

組件化開發(fā)：將復(fù)雜UI拆分為獨立的可復(fù)用組件，降低代碼耦合度，提升代碼可維護(hù)性和復(fù)用性。
虛擬DOM（Virtual DOM）：React不直接操作真實DOM，而是通過虛擬DOM（JavaScript對象）描述DOM結(jié)構(gòu)，通過Diff算法計算最小更新范圍，減少DOM操作，提升頁面性能。
聲明式編程：只需關(guān)注“UI應(yīng)該是什么樣子”，無需關(guān)注“如何實現(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等工具，可快速實現(xiàn)多端應(yīng)用開發(fā)，復(fù)用Web端代碼。

2.3 React與其他框架對比（Vue/Angular）

框架	核心特點	優(yōu)勢	適用場景
React	組件化、虛擬DOM、單向數(shù)據(jù)流、Hooks	生態(tài)豐富、跨平臺能力強(qiáng)、靈活性高、適合復(fù)雜應(yīng)用	中大型Web應(yī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)隊協(xié)作項目
總結(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)下一步即可。
驗證安裝：打開終端（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ǔ)體驗；Create React App適合正式項目開發(fā)，自動配置好工程化環(huán)境。

3.2.1 方式一：CDN引入（快速體驗）

無需搭建復(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（正式項目）

Create React App（CRA）是React官方推薦的項目腳手架，自動配置好Webpack、Babel、ESLint等工具，無需手動配置，開箱即用。

# 1. 全局安裝Create React App（僅首次需要）
npm install -g create-react-app
# 2. 創(chuàng)建React項目（項目名自定義，如react-basic-demo）
create-react-app react-basic-demo
# 3. 進(jìn)入項目目錄
cd react-basic-demo
# 4. 啟動項目
npm start

啟動成功后，瀏覽器會自動打開http://localhost:3000，看到React默認(rèn)頁面即表示項目搭建成功。

3.3 項目目錄結(jié)構(gòu)解析（CRA創(chuàng)建的項目）

CRA創(chuàng)建的項目目錄結(jié)構(gòu)清晰，核心文件如下（精簡版，忽略無關(guān)文件）：

react-basic-demo/
├── node_modules/          # 項目依賴包（自動生成）
├── public/                # 靜態(tài)資源目錄
│  ├── index.html          # 入口HTML文件（React渲染的容器）
│  └── favicon.ico         # 項目圖標(biāo)
├── src/                   # 核心代碼目錄（開發(fā)重點）
│  ├── App.js              # 根組件（整個應(yīng)用的入口組件）
│  ├── App.css             # App組件的樣式文件
│  ├── index.js            # 入口JS文件（渲染根組件到DOM）
│  └── index.css           # 全局樣式文件
├── .gitignore             # Git忽略文件
├── package.json           # 項目配置文件（依賴、腳本）
└── README.md              # 項目說明文檔

核心文件說明：

public/index.html：唯一的HTML文件，React所有組件都會渲染到該文件的<div id="root"></div>中。
src/index.js：入口JS文件，負(fù)責(zé)將根組件（App.js）渲染到HTML的root容器中。
src/App.js：根組件，所有其他組件都會作為它的子組件，是整個應(yīng)用的核心。

3.4 啟動與運行項目

在項目目錄中，執(zhí)行以下命令即可啟動/打包項目：

# 啟動開發(fā)服務(wù)器（熱更新，修改代碼實時生效）
npm start
# 打包項目（生成生產(chǎn)環(huán)境代碼，用于部署）
npm run build
# 運行測試（可選）
npm test
#  eject配置（可選，暴露Webpack等配置，一旦執(zhí)行無法撤銷）
npm run eject

注意：npm run eject會暴露項目的Webpack、Babel等配置文件，適合需要自定義配置的場景，零基礎(chǔ)入門不建議執(zhí)行，避免破壞默認(rèn)配置。

4. React核心概念（必學(xué)）

4.1 JSX語法詳解

JSX（JavaScript XML）是React的核心語法，允許在JavaScript中編寫HTML-like代碼，本質(zhì)是JavaScript的語法擴(kuò)展，最終會被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ī)則（必記）

1. 標(biāo)簽必須閉合：HTML中可省略閉合的標(biāo)簽（如
  ），JSX中必須閉合（
  ）。
1. className替代class：HTML中用class定義樣式類，JSX中用className（因為class是JavaScript的關(guān)鍵字）。
1. 內(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>
  );
};

1. 嵌入JavaScript表達(dá)式：用{}包裹JavaScript表達(dá)式（變量、函數(shù)調(diào)用、三元運算等），不能嵌入語句（if/for等）。

const App = () => {
  const name = 'React';
  const isShow = true;
  // 嵌入變量、三元運算
  return (
    <div>
      <p>Hello, {name}!</p>
      {isShow ? <p>顯示內(nèi)容</p> : <p>隱藏內(nèi)容</p>}
      <p>1+1={1+1}</p> {/* 嵌入表達(dá)式 */}
    </div>
  );
};

1. 多標(biāo)簽必須有根節(jié)點：JSX中如果有多個標(biāo)簽，必須用一個根節(jié)點包裹（如div、Fragment），F(xiàn)ragment（<></>）是無渲染節(jié)點，不會生成額外的DOM。

// 正確：用Fragment包裹多標(biāo)簽
const App = () => {
  return (
    <>
      <h1>標(biāo)題</h1>
      <p>內(nèi)容</p>
    </>
  );
};
// 錯誤：無根節(jié)點
const App = () => {
  return (
    <h1>標(biāo)題</h1>
    <p>內(nèi)容</p>
  );
};

4.2 組件基礎(chǔ)（函數(shù)組件vs類組件）

組件是React的核心，將UI拆分為獨立的、可復(fù)用的單元，每個組件負(fù)責(zé)渲染一部分UI，接收輸入（props），返回需要渲染的JSX。React中的組件分為兩種：函數(shù)組件和類組件，目前React官方推薦使用函數(shù)組件（搭配Hooks）。

4.2.1 函數(shù)組件（推薦）

函數(shù)組件是最簡單的組件形式，本質(zhì)是一個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，必須實現(xiàn)render()方法，render()方法返回JSX。

// 引入React
import React from 'react';
// 類組件
class Welcome extends React.Component {
  // 必須實現(xiàn)render方法
  render() {
    return <h1>歡迎學(xué)習(xí)React</h1>;
  }
}
export default Welcome;

4.2.3 兩種組件對比

組件類型	優(yōu)點	缺點	適用場景
函數(shù)組件	語法簡潔、易維護(hù)、支持Hooks、性能更優(yōu)	早期不支持狀態(tài)管理（需Hooks）	所有場景（React 16.8+推薦）
類組件	支持狀態(tài)管理、生命周期方法	語法繁瑣、代碼冗余、不支持Hooks	舊項目維護(hù)、需要使用傳統(tǒng)生命周期的場景
注意：React 16.8版本引入Hooks后，函數(shù)組件可以實現(xiàn)類組件的所有功能，且更簡潔，因此新項目優(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)值與類型校驗

為了提升代碼健壯性，可給props設(shè)置默認(rèn)值，同時進(jìn)行類型校驗（需安裝prop-types包）。

// 安裝prop-types（用于類型校驗）
// 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
};
// 類型校驗（指定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ù)（實現(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ā)生變化時，組件會重新渲染（更新UI）。與props不同，state是組件內(nèi)部的，可修改（但需通過setState方法）。

4.4.1 函數(shù)組件中使用state（useState Hook）

函數(shù)組件通過useState Hook管理state，useState接收初始值，返回一個數(shù)組，第一個元素是state值，第二個元素是修改state的函數(shù)（setState）。

// 引入useState Hook
import { useState } from 'react';
const Counter = () => {
  // 定義state：count（初始值為0），setCount（修改count的函數(shù)）
  const [count, setCount] = useState(0);
  // 點擊按鈕，修改count
  const handleIncrement = () => {
    // 方式1：直接傳遞新值
    setCount(count + 1);
    // 方式2：接收prevState（上一次的state值），適合依賴上一次state的場景
    // setCount(prevCount => prevCount + 1);
  };
  return (
    <div>
      <p>當(dāng)前計數(shù)：{count}</p>
      <button onClick={handleIncrement}>點擊加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)前計數(shù)：{this.state.count}</p>
        <button onClick={() => this.handleIncrement()}>點擊加1</button>
      </div>
    );
  }
}

4.4.3 setState注意事項

1. setState是異步的：React會批量處理setState調(diào)用，避免頻繁更新DOM，因此修改后不能立即獲取最新的state值。
1. 不能直接修改state：無論是函數(shù)組件還是類組件，都不能直接修改state（如count = count + 1、this.state.count = 1），必須通過setState方法修改，否則組件不會重新渲染。
1. 批量更新：多次調(diào)用setState會被合并為一次更新，提升性能。

// 異步示例
const Counter = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 輸出0（不是最新值），因為setState是異步的
  };
  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>點擊</button>
    </div>
  );
};

4.5 事件處理（React事件機(jī)制）

React事件是基于原生DOM事件的封裝，語法與原生DOM事件類似，但有一些區(qū)別，核心是“事件委托”（將事件綁定到根節(jié)點，提升性能）。

4.5.1 React事件基本使用

const EventDemo = () => {
  // 定義事件處理函數(shù)
  const handleClick = () => {
    alert('按鈕被點擊了');
  };
  // 綁定點擊事件（注意：是onClick，駝峰命名法，不是onclick）
  return <button onClick={handleClick}>點擊我</button>;
};

4.5.2 事件傳遞參數(shù)

const EventDemo = () => {
  // 事件處理函數(shù)接收參數(shù)
  const handleClick = (name) => {
    alert(`歡迎 ${name}`);
  };
  // 方式1：通過箭頭函數(shù)傳遞參數(shù)
  return (
    <div>
      <button onClick={() => handleClick('React')}>點擊1</button>
      <button onClick={() => handleClick('Vue')}>點擊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}>
      點擊不跳轉(zhuǎn)
    </a>
  );
};

4.5.4 React事件與原生DOM事件的區(qū)別

1. 命名方式：React事件采用駝峰命名法（onClick、onChange），原生DOM事件采用小寫（onclick、onchange）。
1. 事件綁定：React事件綁定的是函數(shù)引用，原生DOM事件綁定的是字符串（如οnclick=“handleClick()”）。
1. 事件對象：React事件對象是SyntheticEvent（合成事件），原生DOM事件對象是Event。

4.6 條件渲染（多種實現(xiàn)方式）

React中根據(jù)不同的條件渲染不同的UI，常用的實現(xiàn)方式有4種：三元運算符、邏輯與（&&）、if-else、switch-case。

4.6.1 三元運算符（推薦，簡潔）

const ConditionDemo = () => {
  const isLogin = true;
  return (
    <div>
      {/* 三元運算符：條件為true渲染第一個，false渲染第二個 */}
      {isLogin ? <p>歡迎登錄</p> : <p>請先登錄</p>}
    </div>
  );
};

4.6.2 邏輯與（&&）（適合渲染單個元素）

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的作用與注意事項）

React中渲染列表時，需使用map()方法遍歷數(shù)組，生成多個組件，同時必須給每個列表項添加key屬性（唯一標(biāo)識），否則會出現(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ù)組，生成列表項 */}
      {list.map(item => (
        // 必須添加key屬性，且key值唯一
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

4.7.2 key的作用

1. 幫助React識別哪些列表項發(fā)生了變化（新增、刪除、修改），從而只更新變化的項，提升渲染性能（避免全量更新）。
1. 避免列表項的狀態(tài)混亂（如復(fù)選框選中狀態(tài)、輸入框內(nèi)容）。

4.7.3 key的注意事項

1. key必須唯一：不能重復(fù)，否則會出現(xiàn)警告。
1. key不能用index（索引）：如果列表項會新增、刪除、排序，用index作為key會導(dǎo)致React誤判，影響性能和狀態(tài)。
1. key應(yīng)與數(shù)據(jù)綁定：最好使用數(shù)據(jù)的唯一標(biāo)識（如id、uuid）作為key。

// 錯誤：用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)建、渲染、更新到銷毀的整個過程，每個階段都有對應(yīng)的鉤子函數(shù)（生命周期方法），用于執(zhí)行特定的邏輯。React 16.3+后的生命周期分為三個階段：掛載階段、更新階段、卸載階段。

5.1.1 掛載階段（組件創(chuàng)建并渲染到DOM）

執(zhí)行順序：constructor → render → componentDidMount

constructor：組件初始化，初始化state、綁定事件（如this.handleClick = this.handleClick.bind(this)）。
render：渲染組件，返回JSX，不能修改state（否則會陷入無限循環(huán)）。
componentDidMount：組件掛載完成（已渲染到DOM），適合執(zhí)行副作用操作（如請求數(shù)據(jù)、綁定DOM事件）。

5.1.2 更新階段（組件state或props變化時）

執(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時才更新
    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}>點擊加1</button>
      </div>
    );
  }
}
export default LifeCycleDemo;

注意：函數(shù)組件沒有生命周期方法，可通過useEffect Hook實現(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)，可聲明多個狀態(tài)，互不影響。

import { useState } from 'react';
const MultiStateDemo = () => {
  // 聲明多個狀態(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接收兩個參數(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ù)組的作用

1. 空數(shù)組（[]）：回調(diào)函數(shù)只執(zhí)行一次（組件掛載時），清理函數(shù)在組件卸載時執(zhí)行。
1. 無依賴數(shù)組：回調(diào)函數(shù)在組件掛載和每次更新時都執(zhí)行，清理函數(shù)在每次更新前執(zhí)行。
1. 有依賴數(shù)組（如[name, age]）：回調(diào)函數(shù)在組件掛載時執(zhí)行，且當(dāng)依賴項（name或age）發(fā)生變化時執(zhí)行，清理函數(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线