正在尋找快速掌握 React 基礎(chǔ)知識(shí)的方法嗎？是否對(duì)冗長(zhǎng)的教程感到不知所措？只需 5 分鐘，您就可以學(xué)到足夠的知識(shí)來(lái)閱讀和理解大多數(shù) React 代碼。

目錄

• 什么是 React？
• 核心概念
• 常見模式
• 將它們放在一起
• 就是這樣！

什么是反應(yīng)？

React 是一個(gè) JavaScript 庫(kù)，用于構(gòu)建按鈕或表單等 UI。

想象一下用樂(lè)高積木進(jìn)行建造。您不用建造一座大城堡，而是使用連接在一起的較小的、可重復(fù)使用的部件來(lái)建造。 React 允許您使用稱為“組件”的可重用部件構(gòu)建 Web 界面。

React 代碼如下：

// A simple React component
function Greeting() {
  return <h1>Hello!</h1>;
}

這種特殊的語(yǔ)法稱為 JSX - 它允許您在 JavaScript 中編寫類似 HTML 的代碼。

React 可以幫助您：

• 將復(fù)雜的 UI 分解為可管理的部分
• 使用虛擬 DOM 系統(tǒng)高效處理 UI 和數(shù)據(jù)
• 數(shù)據(jù)發(fā)生變化時(shí)自動(dòng)更新網(wǎng)頁(yè)

核心概念

1. 組件 ?

組件就像 React 中的樂(lè)高積木。它們是可重復(fù)使用的 UI 部件，您可以組合起來(lái)。

// A simple component
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Using it
<Welcome name="Alice" />

2.道具？

Props 是傳遞給組件的數(shù)據(jù) - 就像函數(shù)參數(shù)一樣。

// 'name' and 'age' are passed to UserCard() as props
function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

<UserCard name="Alice" age={25} />

注意：道具是只讀的。

3. 狀態(tài)？

狀態(tài)是可以改變的數(shù)據(jù)。當(dāng)它發(fā)生變化時(shí)，React 會(huì)自動(dòng)更新 UI。

function LikeButton() {
  // 'likes' is state
  // 'setLikes' is function to update the state
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      Likes: {likes}
    </button>
  );
}

注意：useState(0) 設(shè)置初始值為 0 的狀態(tài)（更多關(guān)于 Hooks 的信息見下文）。

4. 鉤子？

Hooks 是讓組件使用 React 功能的函數(shù)。他們總是以“使用”開頭。

• useState：用于管理變化的數(shù)據(jù)（狀態(tài)）
  

  const [count, setCount] = useState(0); // Initialize count with 0
  

• useEffect：用于在特定時(shí)間運(yùn)行代碼（如 API 調(diào)用）
  

  useEffect(() => {
      fetchData(); // Get data
  }, []);          // Run once when page loads
  

常見模式

條件渲染

根據(jù)條件顯示不同的內(nèi)容：

function Greeting({ isLoggedIn }) {
  return isLoggedIn
   ? <h1>Welcome!</h1>
   : <h1>Please log in</h1>;
}

當(dāng)isLoggedIn為true時(shí)，顯示“歡迎！”，否則顯示“請(qǐng)登錄”。

用法：

<Greeting isLoggedIn={true} />   // "Welcome!"
<Greeting isLoggedIn={false} />  // "Please log in"

事件處理

處理點(diǎn)擊等用戶交互：

function ToggleButton() {
 // Track button state (ON/OFF)
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

單擊時(shí)，按鈕文本會(huì)在“ON”和“OFF”之間切換。

用法：

<ToggleButton />  // Shows: "OFF" by default

把它們放在一起？

這是一個(gè)使用我們所學(xué)知識(shí)的真實(shí)示例：

function LikeButton({ initialLikes = 0 }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      {likes === 0 ? '?' : '?'} {likes > 0 && likes}
    </button>
  );
}

這個(gè) LikeButton 組件：

• 獲得初始點(diǎn)贊算作道具
• 計(jì)數(shù)為0時(shí)顯示空心(?)
• 當(dāng)喜歡>時(shí)顯示帶有數(shù)字的粉紅心（？） 0
• 點(diǎn)擊時(shí)更新心臟和計(jì)數(shù)

使用示例：

// A simple React component
function Greeting() {
  return <h1>Hello!</h1>;
}

就是這樣！ ？

您現(xiàn)在已經(jīng)了解了 React 基礎(chǔ)知識(shí)！雖然還有更多東西需要學(xué)習(xí)，但您可以理解您看到的大多數(shù) React 代碼。

準(zhǔn)備好開始了嗎？

創(chuàng)建 React 項(xiàng)目有多種方法：

• Next.js：全棧React框架，推薦用于大多數(shù)新項(xiàng)目
• Gatsby： 用于快速 CMS 支持的網(wǎng)站的 React 框架
• Vite: 現(xiàn)代且快速的構(gòu)建工具，非常適合學(xué)習(xí) React 和構(gòu)建單頁(yè)應(yīng)用程序

詳細(xì)信息在這里。

編碼快樂(lè)?

以上是理解ins中的React的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！