了解 React 中的高階元件 (HOC)：增強功能和可重複使用性-js教程-PHP中文網

Understanding Higher-Order Components (HOC) in React: Enhancing Functionality and Reusability

React 中的高階組件 (HOC)：增強組件功能

在 React 中，高階元件 (HOC) 是一種用於增強或修改元件功能的模式。它是一個函數，它接受一個元件並傳回一個具有附加屬性或行為的新元件。 HOC 可讓您在應用程式的不同部分重複使用元件邏輯，而無需修改原始元件。

1.什麼是高階組件 (HOC)？

高階組件 (HOC) 是一個函數：

採用組件作為參數。
傳回一個新的增強組件，它包裝了原始組件，增加了額外的功能或行為。

HOC 是 React 可組合性模型的基本組成部分，可讓您為元件新增身分驗證檢查、資料擷取、日誌記錄等功能，而無需修改元件本身。

HOC 的主要特徵：

純函數：HOC 不會修改原始元件；他們傳回一個具有附加行為的新元件。
組件組合：HOC 允許您將多種行為組合到一個組件中。
可重複使用邏輯：HOC 可以跨多個元件重複使用邏輯。

2.高階組件如何運作？

HOC 不會改變原始組件，而是用附加功能包裝它。他們透過傳遞新的 props、管理狀態或引入副作用來增強或修改元件。

高階組件範例：

import React from 'react';

// A simple component
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// HOC that adds logging behavior
const withLogging = (WrappedComponent) => {
  return (props) => {
    console.log('Rendering with props:', props);
    return <WrappedComponent {...props} />;
  };
};

// Wrap the Greeting component with HOC
const GreetingWithLogging = withLogging(Greeting);

const App = () => {
  return <GreetingWithLogging name="John" />;
};

export default App;

登入後複製

說明：

Greeting 是一個簡單的元件，它接受 name 屬性並呈現問候語。
withLogging 是一個高階元件，每次渲染 Greeting 元件時都會記錄 props。
GreetingWithLogging 是 HOC 傳回的新元件，除了原始功能之外，它現在還具有日誌記錄行為。

3.高階組件的用例

a.程式碼可重複使用性

HOC 可讓您在應用程式的多個位置重複使用邏輯，而無需重複程式碼。您可以建立一個封裝邏輯並將其應用於任何元件的 HOC，而不是在每個元件中重複功能。

b.跨領域關注

HOC 對於實現跨多個元件的常見行為非常有用，例如：

驗證：HOC 可以在渲染元件之前檢查使用者是否經過驗證。
授權：HOC 可以根據使用者角色限制對應用程式某些部分的存取。
日誌記錄：新增用於偵錯或分析的日誌記錄功能。
錯誤邊界：將組件包裝在錯誤邊界中以優雅地處理錯誤。

c.資料取得

HOC 通常用於資料擷取。他們可以獲取數據並將其作為道具傳遞給包裝的組件。這有助於從各個元件中抽像出資料獲取邏輯。

4. HOC 的常見例子

a. withAuth（驗證 HOC）

用於身份驗證的典型 HOC 可以在渲染元件之前檢查使用者是否已登入。

import React from 'react';

// A simple component
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// HOC that adds logging behavior
const withLogging = (WrappedComponent) => {
  return (props) => {
    console.log('Rendering with props:', props);
    return <WrappedComponent {...props} />;
  };
};

// Wrap the Greeting component with HOC
const GreetingWithLogging = withLogging(Greeting);

const App = () => {
  return <GreetingWithLogging name="John" />;
};

export default App;

登入後複製

b. withDataFetching（資料取得 HOC）

您可以建立一個 HOC 來處理資料擷取並將資料作為 props 傳遞給元件。

const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = // Check user authentication status here
    if (!isAuthenticated) {
      return <div>Please log in to access this page.</div>;
    }
    return <WrappedComponent {...props} />;
  };
};

登入後複製

c. withErrorHandling（錯誤邊界 HOC）

用於擷取元件樹中的 JavaScript 錯誤、記錄這些錯誤並顯示後備 UI 的 HOC。

const withDataFetching = (WrappedComponent, dataSource) => {
  return class extends React.Component {
    state = { data: null, loading: true };

    componentDidMount() {
      fetch(dataSource)
        .then(response => response.json())
        .then(data => this.setState({ data, loading: false }));
    }

    render() {
      const { data, loading } = this.state;
      return loading ? <div>Loading...</div> : <WrappedComponent data={data} {...this.props} />;
    }
  };
};

登入後複製