Caractéristique clé de l'architecture basée sur les composants

Voici 5 caractéristiques clés de l'Architecture basée sur les composants implémentée dans React JS. Ces exemples démontreront comment les composants React incarnent les caractéristiques de

1. Réutilisabilité
2. Encapsulation, Interchangeabilité
3. Évolutivité
4. Maintenabilité
5. Composition

Réutilisabilité
Les composants peuvent être réutilisés dans différentes parties de l'application.
Exemple : Un composant Button utilisé plusieurs fois

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  return (
    <div>
      <Button label="Submit" onClick={() => alert('Submit clicked')} />
      <Button label="Cancel" onClick={() => alert('Cancel clicked')} />
    </div>
  );
}

Encapsulation
Les composants encapsulent leur logique et leurs styles, empêchant les interférences extérieures.
Exemple : composant UserProfile encapsulant les données utilisateur

function UserProfile({ name, email }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Email: {email}</p>
    </div>
  );
}

function App() {
  return (
    <UserProfile name="John Doe" email="john@example.com" />
  );
}

Interchangeabilité
Les composants peuvent être échangés ou remplacés sans affecter la fonctionnalité globale de l'application.
Exemple : échange d'un PrimaryButton avec SecondaireButton

function PrimaryButton({ label, onClick }) {
  return <button style={{ backgroundColor: 'blue', color: 'white' }} onClick={onClick}>{label}</button>;
}

function SecondaryButton({ label, onClick }) {
  return <button style={{ backgroundColor: 'gray', color: 'white' }} onClick={onClick}>{label}</button>;
}

function App({ usePrimary }) {
  return (
    <div>
      {usePrimary ? <PrimaryButton label="Click Me" onClick={() => alert('Primary clicked')} /> : 
                   <SecondaryButton label="Click Me" onClick={() => alert('Secondary clicked')} />}
    </div>
  );
}

Évolutivité
Les composants facilitent la mise à l'échelle en ajoutant plus de fonctionnalités sans affecter les composants existants.
Exemple : ajout de composants de produit supplémentaires pour faire évoluer l'application

function Product({ name, price }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ${price}</p>
    </div>
  );
}

function ProductList() {
  const products = [
    { name: 'iPhone 13', price: 999 },
    { name: 'Samsung Galaxy S21', price: 799 },
    { name: 'Google Pixel 6', price: 599 },
  ];

  return (
    <div>
      {products.map((product, index) => (
        <Product key={index} name={product.name} price={product.price} />
      ))}
    </div>
  );
}

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

Maintenabilité
Les composants sont isolés, ils peuvent donc être facilement entretenus et mis à jour de manière indépendante.
Exemple : Mettre à jour le composant Produit sans affecter le reste de l'application

function Product({ name, price }) {
  // Add a new feature to show if the product is on sale
  const isOnSale = price < 700;
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ${price} {isOnSale && <span>(On Sale!)</span>}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Product name="Google Pixel 6" price={599} />
    </div>
  );
}

Composition
Les composants peuvent être combinés ou composés pour créer des interfaces utilisateur plus complexes.
Exemple : composer l'en-tête, le produit et le pied de page en une seule page

function Header() {
  return <h1>Welcome to My Shop</h1>;
}

function Product({ name, price }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ${price}</p>
    </div>
  );
}

function Footer() {
  return <footer>Contact us at shop@example.com</footer>;
}

function Page() {
  return (
    <div>
      <Header />
      <Product name="Apple Watch" price={399} />
      <Footer />
    </div>
  );
}

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!