React HOC (yuqori tartibli komponentlar)

Yuqori tartibli component nima?

Higher Order Component (HOC) React komponentlaringizga qo‘shimcha imkoniyatlar qo‘shadigan o‘ram (wrapper) kabidir. Buni telefoningizga g‘ilof kiydirishga o‘xshatish mumkin: g‘ilof telefonning o‘zini o‘zgartirmasdan unga yangi imkoniyatlar (masalan, suvdan himoya) qo‘shadi.

Misol: Chegara qo‘shish

HOC qanday ishlashini ko‘rsatish uchun oddiy misol yarataylik - istalgan componentga chegara qo‘shish:

// This is our HOC - it adds a border to any component
function withBorder(WrappedComponent) {
  return function NewComponent(props) {
    return (
      <div style={{ border: '2px solid blue', padding: '10px' }}>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

// Simple component without border
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Create a new component with border
const GreetingWithBorder = withBorder(Greeting);

function App() {
  return (
    <div>
      <Greeting name="John" />
      <GreetingWithBorder name="Jane" />
    </div>
  );
}

Ushbu misolda:

1. withBorder bizning HOC - bu componentni oladigan funksiya
2. Asl nusxani chegara bilan divga o‘rab oladigan yangi componentni qaytaradi
3. The original component (Greeting) remains unchanged
4. Biz hali ham asl va kengaytirilgan versiyalardan foydalanishimiz mumkin