コンポーネントベースのアーキテクチャの主な特徴

React JS で実装された コンポーネントベースのアーキテクチャ の 5 つの主要な特徴を次に示します。これらの例は、React コンポーネントが

の特性をどのように具体化するかを示します。

1. 再利用性
2. カプセル化、互換性
3. スケーラビリティ
4. 保守性
5. 構成

再利用性
コンポーネントはアプリケーションのさまざまな部分で再利用できます。
例: 複数回使用される Button コンポーネント

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')} />
    </button></button>
</div>
  );
}

カプセル化
コンポーネントはロジックとスタイルをカプセル化し、外部の干渉を防ぎます。
例: ユーザーデータをカプセル化する UserProfile コンポーネント

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

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

互換性
アプリの全体的な機能に影響を与えることなく、コンポーネントを交換または置き換えることができます。
例: PrimaryButton と SecondaryButton
を交換する

function PrimaryButton({ label, onClick }) {
  return <button style="{{" backgroundcolor: color: onclick="{onClick}">{label}</button>;
}

function SecondaryButton({ label, onClick }) {
  return <button style="{{" backgroundcolor: color: 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')} />}
    </secondarybutton></primarybutton>
</div>
  );
}

スケーラビリティ
コンポーネントを使用すると、既存のコンポーネントに影響を与えることなく機能を追加することができ、簡単に拡張できます。
例: アプリを拡張するために製品コンポーネントを追加する

function Product({ name, price }) {
  return (
    <div>
      <h3 id="name">{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}"></product>
      ))}
    </div>
  );
}

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

保守性
コンポーネントは分離されているため、個別に簡単に保守および更新できます。
例: アプリの残りの部分に影響を与えずに製品コンポーネントを更新する

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

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

構成
コンポーネントを組み合わせたり、構成したりして、より複雑な UI を構築できます。
例: ヘッダー、製品、フッターを 1 つのページにまとめる

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

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

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

function Page() {
  return (
    <div>
      <header></header>
      <product name="Apple Watch" price="{399}"></product>
      <footer></footer>
    </div>
  );
}

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

以上がコンポーネントベースのアーキテクチャの主な特徴の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。