Komponenten höherer Ordnung (HOCs) in React

Higher-Order Components (HOCs) in React are functions that take a component and return a new component with enhanced functionality. They allow you to reuse logic across multiple components without duplicating code.

Here's a basic example of a 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;

Key points about HOCs:

• Purpose: Used to add reusable logic to components (e.g., logging, permissions, etc.).
• Pure functions: They don't modify the original component but return a new one.
• Common use cases: Authorization, theme switching, data fetching, etc.

While HOCs were more commonly used before the introduction of React hooks, they are still useful in many cases.

Das obige ist der detaillierte Inhalt vonKomponenten höherer Ordnung (HOCs) in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!