React 中的高階元件 (HOC)

React 中的高階元件 (HOC) 是採用元件並傳回具有增強功能的新元件的函數。它們允許您跨多個元件重複使用邏輯，而無需重複程式碼。

這是 HOC 的基本範例：

import React from 'react';

// A Higher-Order Component
function withExtraInfo(WrappedComponent) {
  return function EnhancedComponent(props) {
    return (
      <div>
        <p>This is extra info added by the HOC!</p>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

// A regular component
function MyComponent() {
  return <p>This is my component!</p>;
}

// Wrap the component with the HOC
const EnhancedMyComponent = withExtraInfo(MyComponent);

function App() {
  return <EnhancedMyComponent />;
}

export default App;

HOC 的要點：

• 用途：用於新增可重複使用邏輯（例如日誌記錄、權限等）至元件。
• 純函數：它們不會修改原始元件，而是傳回一個新元件。
• 常見用例：授權、主題切換、資料取得等

雖然 HOC 在引入 React hooks 之前更常用，但它們在許多情況下仍然有用。

以上是React 中的高階元件 (HOC)的詳細內容。更多資訊請關注PHP中文網其他相關文章！