Web開發 05

1 React庫（人話詳解版）

別慌，React 剛接觸時是會有點懵，咱們用 “人話 + 類比” 一步步拆：

核心概念先抓牢

組件（Component）
把它想成 “樂高積木”，比如做個社交 App，頂部導航是一塊積木（Navbar 組件）、發的帖子是另一塊（Post 組件）。整個 App 就是這些積木拼起來的，每個組件單獨存一個文件，好管理。
屬性（Props）
這是組件的 “配置參數”。比如你做個按鈕組件?<Button text="點擊我" />，text?就是 props，父組件傳給子組件用的，子組件只能讀、不能改（像游戲里固定的初始裝備）。
狀態（State）
組件自己的 “可變數據”。比如點贊按鈕，點一下數字 + 1，這個點贊數就是 state，組件內部能改（用?useState?聲明，像?const [count, setCount] = useState(0)?，count?是當前數，setCount?用來改它）。
副作用（useEffect）
處理 “組件渲染之外的事兒”，比如加載數據、訂閱事件。比如組件一加載，就去服務器拿用戶信息，用?useEffect?寫：

jsx

useEffect(() => {fetch('/api/user').then(res => res.json()).then(data => setUser(data))
}, []) // 空數組意思是 “只在組件第一次渲染時執行”

舉個小例子串起來

假設做個 “點贊卡片” 組件：

jsx

import React, { useState } from 'react';// 子組件：點贊按鈕（用 props 接收父組件的初始點贊數）
const LikeButton = ({ initialCount }) => {// 用 state 存實時點贊數const [count, setCount] = useState(initialCount);// 點擊事件：改 stateconst handleLike = () => {setCount(count + 1);};return (<button onClick={handleLike}>點贊啦！當前 {count} 個贊</button>);
};// 父組件：卡片（給子組件傳 props）
const PostCard = () => {return (<div><h2>今日分享</h2><p>React 其實很好玩～</p>{/* 把初始點贊數 0 傳給子組件 */}<LikeButton initialCount={0} /></div>);
};export default PostCard;

這里：

PostCard?是父組件，LikeButton?是子組件；
initialCount={0}?是父傳子的 props；
LikeButton?里的?count?是自己的 state，點擊能變。

router（路由）簡單理解

就是 “網址對應哪個組件”。比如：

訪問?/?→ 顯示首頁組件（Home）
訪問?/profile?→ 顯示個人主頁組件（Profile）
用?react-router?寫大概這樣：

jsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Profile from './Profile';function App() {return (<Router><Routes><Route path="/" element={<Home />} /><Route path="/profile" element={<Profile />} /></Routes></Router>);
}

這樣網址變了，頁面自動切換對應的組件。

為啥覺得難？試試這些

先跑通小 Demo：找個簡單需求（比如做個 todo 列表），用 React 實現，把組件、state、props 練一遍。
看官方文檔 + 拆例子：官方文檔的 “入門教程” 很直觀，跟著做一遍；也可以把別人的小項目（比如 GitHub 搜?react demo）下載下來，拆組件、看 props/state 怎么傳的。
別怕重復查： useState、useEffect 這些 Hook 記不住很正常，用多了自然熟，遇到不懂就翻文檔或搜 “React xxx 怎么用”，慢慢就順了～

React 核心就是 “組件化 + 狀態管理”，把這倆吃透，再復雜的項目也能拆成小積木慢慢拼！要是卡在哪一步（比如 useEffect 總寫不對、組件傳值混亂），直接說，咱們針對性拆。

2 再梳理 React 知識點文檔

一、React 是啥？

簡單說，React 就是個幫你做網頁前端的 JavaScript 庫，核心思路是?“組件化”?。你可以把整個網頁拆成一個一個小 “組件”（比如 Instagram 頁面里的導航欄、帖子卡片、側邊欄這些獨立的 “塊”），然后像搭積木一樣，用這些組件拼出整個 App 。

二、核心概念拆解（結合文檔里的例子和類比）

1. 組件（Components）

是什么：你自定義的 “HTML 標簽” ，比如?<Navbar />（導航欄組件）、<PostCard />（帖子卡片組件），每個組件通常對應一個單獨的 JavaScript 文件。
怎么用：大組件里套小組件，像整個 App 是?<App />?組件，它里面又能拆成?<Header />、<MainContent />、<Footer />?這些子組件，子組件還能繼續拆，形成 “組件樹”（參考文檔最后那個 App 組件樹圖）。

2. 屬性（Props）

是什么：組件的 “輸入參數” ，用來給子組件傳數據，子組件只能讀，不能改?。比如父組件給子組件傳標題：
jsx
```
// 父組件里用子組件，傳 props
<ChildComponent title="這是帖子標題" likes={100} /> 
```
子組件里就能拿到?props.title（值是?“這是帖子標題”?）、props.likes（值是?100?）用。

3. 狀態（State）

是什么：組件自己的 “內部變量” ，能改，改了會讓組件重新渲染更新?。用?useState?聲明，比如：
jsx
```
// 聲明狀態：count 是當前值，setCount 是用來改 count 的函數，初始值 0
const [count, setCount] = useState(0); 
```
點個贊、輸個搜索關鍵詞，這些會變化的 “動態數據” ，就存在 state 里。

4. 路由（Router）

是什么：幫你管理 “不同網址對應哪個組件” ，讓單頁應用能像多頁網站一樣切換頁面。比如：
- 訪問?https://xxx.com/?→ 顯示?<Feed />?組件（首頁）
- 訪問?https://xxx.com/profile?→ 顯示?<Profile />?組件（個人頁）
  用代碼寫就是文檔里那樣，把路徑和組件對應起來。

5. 副作用（useEffect）

是啥場景：組件渲染完后，想做些 “額外的事兒” ，比如?請求接口拿數據、訂閱事件、設置定時器?。因為 React 組件更新時會重新執行代碼，直接寫在組件里的邏輯可能重復執行，useEffect?能控制這些邏輯?啥時候執行?。
怎么用：看依賴數組（第二個參數）：
- useEffect(() => { ... }, [])?：空數組，組件?只在第一次渲染完執行一次?（比如初始化時拿用戶信息）。
- useEffect(() => { ... }, [title, count])?：依賴?title?或?count?，這倆變了就執行?（比如標題變了，重新請求對應數據）。

6.?`.then()`?是啥（文檔里單獨講的）

本質：JavaScript 里處理 “異步操作” 的，比如用?fetch?調接口，接口請求得等一會兒才返回結果，.then()?就是?等異步操作做完，再執行后面的邏輯?。

例子：

jsx

// 調接口，等返回結果后，把數據存到 state 里
fetch('/api/posts').then(response => response.json()) .then(data => setPosts(data));

這樣就能保證拿到接口數據后，再更新組件狀態。

三、文檔里的代碼例子（Example.js）快速理解

文檔里的?Example.js?把上面的概念串起來了，拆解一下：

jsx

// 1. 引入 React 核心和需要的 Hook（useState、useEffect）
import React, { useState, useEffect } from "react"; 
// 引入樣式和子組件
import "./Example.css"; 
import ExampleChildComponent from "./ExampleChildComponent.js"// 2. 定義組件（函數組件），可以接收父組件傳的 props
const Example = (props) => { // 3. 聲明 state：// exampleState1 初始值 "dummy message"，setExampleState1 用來改它const [exampleState1, setExampleState1] = useState("dummy message") // exampleState2 初始值 0，setExampleState2 用來改它const [exampleState2, setExampleState2] = useState(0) // 4. useEffect 做副作用：這里調接口，拿到數據后改 exampleState1useEffect(() => { // 調接口（異步），.then() 等接口返回后執行get("/api/anEndpoint", { param1: "value" }).then((serverResponse) => { setExampleState1(serverResponse) // 把接口數據存到 state})}, []) // 空數組，只執行一次// 5. 定義一個函數，用來改 state（點按鈕時會觸發）const addOneToState2 = () => { setExampleState2(exampleState2 + 1)}// 6. 返回組件的 HTML 結構（JSX）return ( <div>{/* 用 props 里的 title */}<h1 className="headerStyle1">{props.title}</h1> {/* 渲染子組件，傳 props：固定值 10、和 state 關聯的 exampleState2 */}<ExampleChildComponent exampleProp1={10} exampleProp2={exampleState2} />{/* 點擊按鈕，執行 addOneToState2 改 state */}<button onClick={addOneToState2} /> </div>);
}// 7. 導出組件，讓其他組件能引入使用
export default Example;

這里用到了?組件、props（父傳子）、state（組件內部狀態）、useEffect（調接口）?，把核心流程走了一遍。

四、FAQ 里的關鍵問答（幫你區分易混點）

State 和 Props 有啥區別？
- Props 是?父組件傳的、只讀?，像 “配置參數” ，子組件不能自己改；
- State 是?組件自己的、可修改?，改了會觸發組件重新渲染，像 “動態數據” 。
  類比：Props 是父母給孩子的 “零花錢（固定數，孩子不能自己改數）” ；State 是孩子自己的 “儲蓄罐（想存想取自己定）” 。
文件太多咋管理？
記住?“組件樹”?！整個 App 是根組件，往下拆成各種子組件，每個組件對應一個文件。心里有這個樹狀結構，就知道哪個文件是干啥的、數據咋傳的了（參考文檔最后那個 App 組件樹圖）。

五、總結一下學習路徑

先抓核心概念：組件、Props、State 是基礎，把這仨吃透，React 就入門了。
練小例子：從做個按鈕點擊計數、調接口渲染列表開始，把概念用起來。
看文檔 + 模仿項目：官方文檔的 “入門示例” 跟著做，再找簡單的 React 項目（比如 GitHub 搜小 Demo ），拆組件、看邏輯咋寫的。

剛開始頭大正常，多練幾遍、遇到問題拆分概念找對應，慢慢就順了！要是哪個點還卡，隨時拆。

3?jsx和html通常是不是看成是一樣的？（答：建議先把 JSX 當成 “特殊的 JS 寫法”，別和 HTML 混為一談）

JSX 和 HTML 雖然看起來很像，但本質上是不同的東西，理解它們的區別對寫 React 很關鍵。我用大白話 + 例子幫你拆：

核心區別：JSX 是 JavaScript，HTML 是標記語言

HTML

是網頁的 “骨架”，由瀏覽器解析，比如：

html

預覽

<div class="container"><h1>Hello World</h1><button onclick="alert('Hi')">Click me</button>
</div>

JSX

是?JavaScript 的語法擴展（可以理解成 “帶 HTML 語法的 JS”），最終會被編譯成純 JS 代碼，比如：

jsx

// JSX 代碼
const element = (<div className="container"><h1>Hello World</h1><Button onClick={() => alert('Hi')} /></div>
);// 編譯后等價的 JS 代碼（用 React.createElement）
const element = React.createElement("div",{ className: "container" },React.createElement("h1", null, "Hello World"),React.createElement(Button, { onClick: () => alert('Hi') })
);

寫法上的 4 個主要差異

1.?屬性名不同

HTML：用小寫或連字符（class,?onclick）
JSX：用駝峰命名（className,?onClick）

jsx

// HTML
<div class="box" onclick="handleClick()">...</div>// JSX
<div className="box" onClick={handleClick}>...</div>

2.?插入表達式不同

HTML：不能直接插 JS 表達式
JSX：用?{}?插任何 JS 表達式（變量、函數調用、計算等）

jsx

// JSX 里插入變量或計算
const name = "Alice";
<h1>Hello, {name.toUpperCase()}!</h1> // 輸出 "Hello, ALICE!"

3.?自閉和標簽

HTML：部分標簽可省略閉合（如?<input>,?<br>）
JSX：所有標簽必須閉合！

jsx

// HTML
<input type="text">
<br>// JSX（必須閉合）
<input type="text" />
<br />

4.?必須有一個根元素

HTML：可以有多個并列標簽
JSX：必須用一個標簽包裹所有內容（或用?<>...</>?片段）

jsx

// 錯誤：JSX 必須有根元素
return (<h1>標題</h1><p>內容</p>
);// 正確：用一個 div 包裹
return (<div><h1>標題</h1><p>內容</p></div>
);// 或者用空標簽（片段）
return (<><h1>標題</h1><p>內容</p></>
);

為什么 JSX 要設計成這樣？

核心目的：讓你在 JS 里更直觀地寫 UI
React 的理念是 “UI = f (state)”（UI 是狀態的函數），JSX 讓你在 JS 代碼里自然地描述 UI，而不是把 HTML 和 JS 分開寫（比如傳統的 DOM 操作）。
編譯時優化
JSX 編譯后是?React.createElement，React 能提前分析和優化組件結構。

常見誤區糾正

JSX 不是模板語言
模板語言（如 Vue 的模板）是 “HTML 里插 JS”，而 JSX 是 “JS 里插 HTML”，本質是 JS。
JSX 必須引入 React
因為 JSX 會編譯成?React.createElement，所以即使你沒顯式用?React，也得?import React from 'react'（React 17+ 后可以省略）。

JSX 里的邏輯更靈活
比如條件渲染、循環：

jsx

// 條件渲染
{isLoggedIn ? <UserProfile /> : <LoginButton />}// 循環渲染列表
{items.map(item => (<div key={item.id}>{item.name}</div>
))}

總結：一句話區分

HTML：是給瀏覽器看的標記語言。
JSX：是給開發者看的 “語法糖”，最終會變成純 JS 代碼。

剛開始寫 React 時，建議先把 JSX 當成 “特殊的 JS 寫法”，別和 HTML 混為一談。多寫幾個組件，自然就習慣了！

4?React 組件編寫的知識點總結

Recap: Writing Components

總結?“怎么拆分、寫組件”?的基礎規則：

組件拆分：把 App 拆成多個組件，每個組件單獨放一個文件（方便管理，像搭積木一樣）。
組件本質：每個組件是?“接收 props 當輸入，返回 JSX（長得像 HTML 的代碼）” 的函數。
JSX 語法：
- 用?()?包裹多行 JSX，讓代碼進入 “JSX 環境”（寫法規范，避免歧義）。
- 在 JSX 里，用?{}?臨時切回 “JS 環境”，可以寫變量、表達式（比如?{props.name}?插變量）。

總結?“組件傳值、狀態、樣式”?的關鍵細節：

傳 props：父組件用?<Post text="I love weblab" />?這種方式，給子組件傳數據（text?就是 props）。
讀 props：子組件里用?props.text?拿到父組件傳的值。
聲明 state：用?useState?存組件的 “可變數據”，格式是?const [something, setSomething] = useState(initialValue)（something?是當前值，setSomething?是改它的函數）。
樣式寫法：React 里給元素加 CSS 類名，用?className?代替 HTML 里的?class（因為?class?在 JS 里是關鍵字，沖突啦）。