像專業(yè)人士一樣寫 React 元件：從零到英雄的初學(xué)者指南

---

介紹

React 是用於建立使用者介面的最受歡迎的 JavaScript 程式庫之一。無論您是初學(xué)者還是經(jīng)驗(yàn)豐富的開發(fā)人員，掌握創(chuàng)建和增強(qiáng)組件的藝術(shù)是建立可擴(kuò)展應(yīng)用程式的關(guān)鍵。在本指南中，我們將介紹您需要了解的有關(guān)編寫 React 元件、使用高階元件 (HOC) 增強(qiáng)它們、使用鉤子獲取資料以及控制副作用的所有資訊。最後，您將能夠像專業(yè)人士一樣建立和建立 React 應(yīng)用程式。

---

什麼是 React 元件？

React 元件本質(zhì)上是一個(gè) JavaScript 函數(shù)或類，它使用 JSX（JavaScript 的語法擴(kuò)充）輸出 UI 元素。元件可讓您將 UI 分割為獨(dú)立的、可重複使用的部分。

這是一個(gè)簡(jiǎn)單的功能組件的範(fàn)例：

import React from 'react';

function WelcomeMessage() {
  return <h1>Welcome to React</h1>;
}

export default WelcomeMessage;

為什麼元件很重要：元件是任何 React 應(yīng)用程式的建構(gòu)塊。它們有助於將複雜的 UI 分解為更小的、可管理的部分。

---

使用高階組件 (HOC) 增強(qiáng)組件

什麼是 HOC？

高階組件是一個(gè)接受組件並返回新的增強(qiáng)組件的函數(shù)。 HOC 用於跨多個(gè)元件重複使用邏輯。

這是新增日誌記錄功能的 HOC 範(fàn)例：

function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Component is rendering with props:', props);
    return <WrappedComponent {...props} />;
  };
}

// Usage
const WelcomeWithLogging = withLogging(WelcomeMessage);

在此範(fàn)例中，withLogging HOC 包裝了 WelcomeMessage 元件，並在每次渲染該元件時(shí)記錄 props。這允許您透過附加功能（例如日誌記錄、身份驗(yàn)證檢查等）增強(qiáng)現(xiàn)有元件，而無需修改原始元件。

---

使用 Hook 取得數(shù)據(jù)

React 的內(nèi)建鉤子可讓您為功能元件新增狀態(tài)和生命週期功能。取得資料最重要的鉤子之一是 useEffect。

取得資料範(fàn)例：

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default DataFetcher;

發(fā)生的事情是這樣的：

• useState 管理載入狀態(tài)和取得的資料。
• useEffect 用於在元件首次渲染時(shí)取得資料。
• 元件有條件地渲染載入狀態(tài)或取得的資料。

為什麼 Hook 很重要： 像 useState 和 useEffect 這樣的 Hook 使管理狀態(tài)和副作用（如獲取資料）變得更加容易，尤其是在功能組件中。

---

使用 useEffect 控制副作用

React 的 useEffect 鉤子對(duì)於處理 API 呼叫、計(jì)時(shí)器或手動(dòng) DOM 操作等副作用至關(guān)重要。

無清除的效果：

並非所有效果都需要清理。例如，在元件安裝時(shí)取得資料不需要清理。您可以使用 useEffect 來執(zhí)行這些類型的操作。

import React from 'react';

function WelcomeMessage() {
  return <h1>Welcome to React</h1>;
}

export default WelcomeMessage;

空數(shù)組 ([]) 確保此效果只運(yùn)作一次，模仿 componentDidMount 的行為。

清理效果：

某些副作用（例如設(shè)定訂閱或計(jì)時(shí)器）需要在卸載組件時(shí)進(jìn)行清理，以避免記憶體洩漏。

範(fàn)例：

function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Component is rendering with props:', props);
    return <WrappedComponent {...props} />;
  };
}

// Usage
const WelcomeWithLogging = withLogging(WelcomeMessage);

在這個(gè)範(fàn)例中，我們?cè)?useEffect 中設(shè)定了一個(gè)計(jì)時(shí)器，並傳回一個(gè) cleanup 函數(shù)來清除元件卸載時(shí)的間隔。

為什麼清理很重要：如果沒有清理，即使元件不再存在，訂閱或間隔等效果也可能繼續(xù)運(yùn)行，從而導(dǎo)致效能問題。

---

組裝應(yīng)用程式

現(xiàn)在我們已經(jīng)看到了構(gòu)建塊，讓我們組裝一個(gè)小應(yīng)用程式來獲取資料、記錄組件渲染並顯示資料。

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default DataFetcher;

在此範(fàn)例中：

• DataFetcher 從 API 取得資料並顯示它。
• withLogging HOC 包裝 DataFetcher 以記錄其渲染週期。
• App 元件組裝所有內(nèi)容，顯示標(biāo)題和 DataFetcher 所取得的資料。

---

常見問題解答

什麼是 JSX？

JSX 是 JavaScript 的語法擴(kuò)展，看起來與 HTML 類似。它允許您在 JavaScript 中編寫 UI 元素。

為什麼要用useEffect？

useEffect 可讓您處理副作用，例如在功能元件中取得資料或操作 DOM。

什麼是高階組件 (HOC)？

HOC 是接受元件並傳回增強(qiáng)元件的函數(shù)，可讓您重複使用元件邏輯。

---

結(jié)論

在本指南中，我們涵蓋了編寫 React 元件從零到英雄所需的一切。從理解基本元件到使用高階元件增強(qiáng)它們，再到使用 useEffect 管理副作用，您現(xiàn)在已經(jīng)為建立可擴(kuò)展和可重複使用的元件奠定了堅(jiān)實(shí)的基礎(chǔ)。透過練習(xí)，您將掌握這些概念並能夠處理更高級(jí)的 React 應(yīng)用程式。繼續(xù)編碼！

以上是像專業(yè)人士一樣編寫 React 元件：初學(xué)者的藍(lán)圖的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！