快速入門(mén) – React 中文文檔

您所在的位置：網(wǎng)站首頁(yè) › 六爻基礎(chǔ)(chǔ)入門(mén)教程 › 快速入門(mén) – React 中文文檔

快速入門(mén) – React 中文文檔

2025-07-15 23:19| 來(lái)源: 網(wǎng)絡(luò)整理| 查看: 265

歡迎來(lái)到 React 文檔！本章節(jié)將介紹你每天都會(huì)使用的 80% 的 React 概念。

你將會(huì)學(xué)習(xí)到如何創(chuàng)建和嵌套組件如何添加標(biāo)簽和樣式如何顯示數(shù)據(jù) 如何渲染條件和列表如何對(duì)事件做出響應(yīng)并更新界面如何在組件間共享數(shù)據(jù) 創(chuàng)建和嵌套組件

React 應(yīng)用程序是由組件組成的。一個(gè)組件是 UI（用戶界面）的一部分，它擁有自己的邏輯和外觀。組件可以小到一個(gè)按鈕，也可以大到整個(gè)頁(yè)面。

React 組件是返回標(biāo)簽的 JavaScript 函數(shù)：

function MyButton() { return ( 我是一個(gè)按鈕 );}

至此，你已經(jīng)聲明了 MyButton，現(xiàn)在把它嵌套到另一個(gè)組件中：

export default function MyApp() { return ( 歡迎來(lái)到我的應(yīng)用 );}

你可能已經(jīng)注意到是以大寫(xiě)字母開(kāi)頭的。你可以據(jù)此識(shí)別 React 組件。React 組件必須以大寫(xiě)字母開(kāi)頭，而 HTML 標(biāo)簽則必須是小寫(xiě)字母。

來(lái)看下效果：

Forkfunction MyButton() { return ( 我是一個(gè)按鈕 ); } export default function MyApp() { return ( 歡迎來(lái)到我的應(yīng)用 ); }

export default 關(guān)鍵字指定了文件中的主要組件。如果你對(duì) JavaScript 某些語(yǔ)法不熟悉，可以參考 MDN 和 javascript.info。

使用 JSX 編寫(xiě)標(biāo)簽

上面所使用的標(biāo)簽語(yǔ)法被稱為 JSX。它是可選的，但大多數(shù) React 項(xiàng)目會(huì)使用 JSX，主要是它很方便。所有我們推薦的本地開(kāi)發(fā)工具都開(kāi)箱即用地支持 JSX。

JSX 比 HTML 更加嚴(yán)格。你必須閉合標(biāo)簽，如。你的組件也不能返回多個(gè) JSX 標(biāo)簽。你必須將它們包裹到一個(gè)共享的父級(jí)中，比如 ... 或使用空的 ... 包裹：

function AboutPage() { return ( 關(guān)于你好。最近怎么樣？ );}

如果你有大量的 HTML 需要移植到 JSX 中，你可以使用在線轉(zhuǎn)換器。

添加樣式

在 React 中，你可以使用 className 來(lái)指定一個(gè) CSS 的 class。它與 HTML 的 class 屬性的工作方式相同：

然后，你可以在一個(gè)單獨(dú)的 CSS 文件中為它編寫(xiě) CSS 規(guī)則：

/* 在你的 CSS 文件中修改 */.avatar { border-radius: 50%;}

React 并沒(méi)有規(guī)定你如何添加 CSS 文件。最簡(jiǎn)單的方式是使用 HTML 的標(biāo)簽。如果你使用了構(gòu)建工具或框架，請(qǐng)閱讀其文檔來(lái)了解如何將 CSS 文件添加到你的項(xiàng)目中。

顯示數(shù)據(jù)

JSX 會(huì)讓你把標(biāo)簽放到 JavaScript 中。而大括號(hào)會(huì)讓你 “回到” JavaScript 中，這樣你就可以從你的代碼中嵌入一些變量并展示給用戶。例如，這將顯示 user.name：

return ( {user.name} );

你還可以將 JSX 屬性 “轉(zhuǎn)義到 JavaScript”，但你必須使用大括號(hào) 而非引號(hào)。例如，className="avatar" 是將 "avatar" 字符串傳遞給 className，作為 CSS 的 class。但 src={user.imageUrl} 會(huì)讀取 JavaScript 的 user.imageUrl 變量，然后將該值作為 src 屬性傳遞：

return ( );

你也可以把更為復(fù)雜的表達(dá)式放入 JSX 的大括號(hào)內(nèi)，例如字符串拼接：

Forkconst user = { name: 'Hedy Lamarr', imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', imageSize: 90, }; export default function Profile() { return ( {user.name} ); }

在上面示例中，style={{}} 并不是一個(gè)特殊的語(yǔ)法，而是 style={ } JSX 大括號(hào)內(nèi)的一個(gè)普通 {} 對(duì)象。當(dāng)你的樣式依賴于 JavaScript 變量時(shí)，你可以使用 style 屬性。

條件渲染

React 沒(méi)有特殊的語(yǔ)法來(lái)編寫(xiě)條件語(yǔ)句，因此你使用的就是普通的 JavaScript 代碼。例如使用 if 語(yǔ)句根據(jù)條件引入 JSX：

let content;if (isLoggedIn) { content = ;} else { content = ;}return ( {content} );

如果你喜歡更為緊湊的代碼，可以使用條件 ? 運(yùn)算符。與 if 不同的是，它工作于 JSX 內(nèi)部：

{isLoggedIn ? ( ) : ( )}

當(dāng)你不需要 else 分支時(shí)，你也可以使用更簡(jiǎn)短的邏輯 && 語(yǔ)法：

{isLoggedIn && }

所有這些方法也適用于有條件地指定屬性。如果你對(duì) JavaScript 語(yǔ)法不熟悉，你可以先使用 if...else。

渲染列表

你將依賴 JavaScript 的特性，例如 for 循環(huán) 和 array 的 map() 函數(shù) 來(lái)渲染組件列表。

假設(shè)你有一個(gè)產(chǎn)品數(shù)組：

const products = [ { title: 'Cabbage', id: 1 }, { title: 'Garlic', id: 2 }, { title: 'Apple', id: 3 },];

在你的組件中，使用 map() 函數(shù)將這個(gè)數(shù)組轉(zhuǎn)換為標(biāo)簽構(gòu)成的列表:

const listItems = products.map(product => {product.title} );return ( {listItems});

注意，有一個(gè) key 屬性。對(duì)于列表中的每一個(gè)元素，你都應(yīng)該傳遞一個(gè)字符串或者數(shù)字給 key，用于在其兄弟節(jié)點(diǎn)中唯一標(biāo)識(shí)該元素。通常 key 來(lái)自你的數(shù)據(jù)，比如數(shù)據(jù)庫(kù)中的 ID。如果你在后續(xù)插入、刪除或重新排序這些項(xiàng)目，React 將依靠你提供的 key 來(lái)思考發(fā)生了什么。

Forkconst products = [ { title: '卷心菜', isFruit: false, id: 1 }, { title: '大蒜', isFruit: false, id: 2 }, { title: '蘋(píng)果', isFruit: true, id: 3 }, ]; export default function ShoppingList() { const listItems = products.map(product => {product.title} ); return ( {listItems} ); } 響應(yīng)事件

你可以通過(guò)在組件中聲明事件處理函數(shù)來(lái)響應(yīng)事件：

function MyButton() { function handleClick() { alert('You clicked me!'); } return ( 點(diǎn)我 );}

注意，onClick={handleClick} 的結(jié)尾沒(méi)有小括號(hào)！不要調(diào)用事件處理函數(shù)：你只需把函數(shù)傳遞給事件即可。當(dāng)用戶點(diǎn)擊按鈕時(shí) React 會(huì)調(diào)用你傳遞的事件處理函數(shù)。

更新界面

通常你會(huì)希望你的組件 “記住” 一些信息并展示出來(lái)，比如一個(gè)按鈕被點(diǎn)擊的次數(shù)。要做到這一點(diǎn)，你需要在你的組件中添加 state。

首先，從 React 引入 useState：

import { useState } from 'react';

現(xiàn)在你可以在你的組件中聲明一個(gè) state 變量：

function MyButton() { const [count, setCount] = useState(0); // ...

你將從 useState 中獲得兩樣?xùn)|西：當(dāng)前的 state（count），以及用于更新它的函數(shù)（setCount）。你可以給它們起任何名字，但按照慣例會(huì)像 [something, setSomething] 這樣為它們命名。

第一次顯示按鈕時(shí)，count 的值為 0，因?yàn)槟惆?0 傳給了 useState()。當(dāng)你想改變 state 時(shí)，調(diào)用 setCount() 并將新的值傳遞給它。點(diǎn)擊該按鈕計(jì)數(shù)器將遞增：

function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( Clicked {count} times );}

React 將再次調(diào)用你的組件函數(shù)。第一次 count 變成 1。接著點(diǎn)擊會(huì)變成 2。繼續(xù)點(diǎn)擊會(huì)逐步遞增。

如果你多次渲染同一個(gè)組件，每個(gè)組件都會(huì)擁有自己的 state。你可以嘗試點(diǎn)擊不同的按鈕：

Forkimport { useState } from 'react'; export default function MyApp() { return ( 獨(dú)立更新的計(jì)數(shù)器 ); } function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( 點(diǎn)了 {count} 次 ); }

注意，每個(gè)按鈕會(huì) “記住” 自己的 count，而不影響其他按鈕。

使用 Hook

以 use 開(kāi)頭的函數(shù)被稱為 Hook。useState 是 React 提供的一個(gè)內(nèi)置 Hook。你可以在 React API 參考中找到其他內(nèi)置的 Hook。你也可以通過(guò)組合現(xiàn)有的 Hook 來(lái)編寫(xiě)屬于你自己的 Hook。

Hook 比普通函數(shù)更為嚴(yán)格。你只能在你的組件（或其他 Hook）的頂層調(diào)用 Hook。如果你想在一個(gè)條件或循環(huán)中使用 useState，請(qǐng)?zhí)崛∫粋€(gè)新的組件并在組件內(nèi)部使用它。

組件間共享數(shù)據(jù)

在前面的示例中，每個(gè) MyButton 都有自己獨(dú)立的 count，當(dāng)每個(gè)按鈕被點(diǎn)擊時(shí)，只有被點(diǎn)擊按鈕的 count 才會(huì)發(fā)生改變：

起初，每個(gè) MyButton 的 count state 均為 0

第一個(gè) MyButton 會(huì)將 count 更新為 1

然而，你經(jīng)常需要組件共享數(shù)據(jù)并一起更新。

為了使得 MyButton 組件顯示相同的 count 并一起更新，你需要將各個(gè)按鈕的 state “向上” 移動(dòng)到最接近包含所有按鈕的組件之中。

在這個(gè)示例中，它是 MyApp：

起初，MyApp 的 count state 為 0 并傳遞給了兩個(gè)子組件

點(diǎn)擊后，MyApp 將 count state 更新為 1，并將其傳遞給兩個(gè)子組件

此刻，當(dāng)你點(diǎn)擊任何一個(gè)按鈕時(shí)，MyApp 中的 count 都將改變，同時(shí)會(huì)改變 MyButton 中的兩個(gè) count。具體代碼如下：

首先，將 MyButton 的 state 上移到 MyApp 中：

export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( 獨(dú)立更新的計(jì)數(shù)器 );}function MyButton() { // ... 我們正在從這里移動(dòng)代碼...}

接著，將 MyApp 中的點(diǎn)擊事件處理函數(shù)以及 state 一同向下傳遞到每個(gè) MyButton 中。你可以使用 JSX 的大括號(hào)向 MyButton 傳遞信息。就像之前向等內(nèi)置標(biāo)簽所做的那樣:

export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( 共同更新的計(jì)數(shù)器 );}

使用這種方式傳遞的信息被稱作 prop。此時(shí) MyApp 組件包含了 count state 以及 handleClick 事件處理函數(shù)，并將它們作為 prop 傳遞給了每個(gè)按鈕。

最后，改變 MyButton 以讀取從父組件傳遞來(lái)的 prop：

function MyButton({ count, onClick }) { return ( 點(diǎn)了 {count} 次 );}

當(dāng)你點(diǎn)擊按鈕時(shí)，onClick 處理程序會(huì)啟動(dòng)。每個(gè)按鈕的 onClick prop 會(huì)被設(shè)置為 MyApp 內(nèi)的 handleClick 函數(shù)，所以函數(shù)內(nèi)的代碼會(huì)被執(zhí)行。該代碼會(huì)調(diào)用 setCount(count + 1)，使得 state 變量 count 遞增。新的 count 值會(huì)被作為 prop 傳遞給每個(gè)按鈕，因此它們每次展示的都是最新的值。這被稱為“狀態(tài)提升”。通過(guò)向上移動(dòng) state，我們實(shí)現(xiàn)了在組件間共享它。

Forkimport { useState } from 'react'; export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( 共同更新的計(jì)數(shù)器 ); } function MyButton({ count, onClick }) { return ( 點(diǎn)了 {count} 次 ); } 下一節(jié)

至此，你已經(jīng)了解了如何編寫(xiě) React 代碼的基本知識(shí)。

接下來(lái)你可以查看實(shí)戰(zhàn)教程并把它們付諸實(shí)踐，用 React 建立第一個(gè)迷你應(yīng)用程序。

【本文地址】

公司簡(jiǎn)介

聯(lián)系我們

今日新聞

推薦新聞

專題文章