React

Component composition > inheritance - React pattern

React gebruikt composition, niet inheritance.

Home/Categorieën/React/Component composition > inheritance - React pattern

Composition beter voor:

Flexible components Reusable logic Anti-pattern inheritance Composable behavior

Patterns

Wrapper/HOC pattern Render props pattern Compound components Slots via children

Code Voorbeelden

JAVASCRIPTComposition patterns
// ✅ Composition - reusable
function Card({ header, children }) {
  return (
    <div className="card">
      {header && <h2>{header}</h2>}
      {children}
    </div>
  );
}

// Usage - compose flexibly
<Card header="Profile">
  <UserInfo />
  <Actions />
</Card>

// Render props pattern
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return children({ theme, setTheme });
}

<ThemeProvider>
  {({ theme, setTheme }) => (
    <div>Theme: {theme}</div>
  )}
</ThemeProvider>

Relevante trefwoorden

compositioninheritancepattern
← Terug naar ReactAlle categorieën →