像專業人士一樣編寫 React 元件：初學者的藍圖-js教程-PHP中文網

Write React Components Like a Pro: A Beginner’s Blueprint

像專業人士一樣寫 React 元件：從零到英雄的初學者指南

介紹

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

什麼是 React 元件？

React 元件本質上是一個 JavaScript 函數或類，它使用 JSX（JavaScript 的語法擴充）輸出 UI 元素。元件可讓您將 UI 分割為獨立的、可重複使用的部分。

這是一個簡單的功能組件的範例：

import React from 'react';

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

export default WelcomeMessage;

登入後複製

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

使用高階組件 (HOC) 增強組件

什麼是 HOC？

高階組件是一個接受組件並返回新的增強組件的函數。 HOC 用於跨多個元件重複使用邏輯。

這是新增日誌記錄功能的 HOC 範例：

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

// Usage
const WelcomeWithLogging = withLogging(WelcomeMessage);

登入後複製

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

使用 Hook 取得數據

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

取得資料範例：

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;

登入後複製

發生的事情是這樣的：

useState 管理載入狀態和取得的資料。
useEffect 用於在元件首次渲染時取得資料。
元件有條件地渲染載入狀態或取得的資料。

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

使用 useEffect 控制副作用

React 的 useEffect 鉤子對於處理 API 呼叫、計時器或手動 DOM 操作等副作用至關重要。

無清除的效果：

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

import React from 'react';

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

export default WelcomeMessage;

登入後複製

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

清理效果：

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

範例：

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

// Usage
const WelcomeWithLogging = withLogging(WelcomeMessage);

登入後複製

在這個範例中，我們在 useEffect 中設定了一個計時器，並傳回一個 cleanup 函數來清除元件卸載時的間隔。

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

組裝應用程式

現在我們已經看到了構建塊，讓我們組裝一個小應用程式來獲取資料、記錄組件渲染並顯示資料。

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;

登入後複製

在此範例中：