# कॉम्पोनेंट्स में सोचना

> आधार के रूप में Component, जीवन-चक्र (onAdd/onRemove), संयोजन और bind के साथ एक custom कॉम्पोनेंट।

Source: https://crossfly.dev/hi/docs/learn/thinking-in-components — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 3. कॉम्पोनेंट्स में सोचना

> **आप क्या सीखेंगे:** हर चीज़ के आधार के रूप में `Component`, जीवन-चक्र, संयोजन और एक पुन:उपयोग योग्य
> कॉम्पोनेंट कैसे बनाएँ। **पूर्वापेक्षाएँ:** [Windows और नेविगेशन](/docs/learn/windows-and-navigation)।

## संपूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
एक पुन:उपयोग योग्य कॉम्पोनेंट (`CardTarefa`) जो `onAdd` में एक बार बनाया जाता है और `bind(...)` के माध्यम से
डेटा से पुन:जोड़ा जाता है। window अलग-अलग डेटा के साथ तीन cards बनाती है। जैसा है वैसा ही compile होता है।
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      CardTarefa c1 = new CardTarefa(); add(LAY_AUTO, c1); c1.bind(new Tarefa("Comprar pão"));
      CardTarefa c2 = new CardTarefa(); add(LAY_AUTO, c2); c2.bind(new Tarefa("Pagar conta"));
      CardTarefa c3 = new CardTarefa(); add(LAY_AUTO, c3); c3.bind(new Tarefa("Estudar CrossFly"));
   }
}

class Tarefa                                             // न्यूनतम मॉडल
{
   final String titulo;
   Tarefa(String titulo) { this.titulo = titulo; }
}

class CardTarefa extends Component
{
   private final Label titulo = new Label();

   @Override
   public void onAdd(boolean firstTime) throws Exception  // संरचना एक बार बनाता है
   {
      super.onAdd(firstTime);
      setLayout(new HorizontalLayout());
      add(LAY_FILL, titulo);
   }

   public void bind(Tarefa t)                             // डेटा के अनुसार फिर से बांधता है (सस्ता)
   {
      titulo.setText(t.titulo);
      repaint();
   }
}
```
> नीचे के अंश **केवल मूल भाग** दिखाते हैं (जो `onShow()` के भीतर जाता है)। चलाने के लिए, उन्हें ऊपर के `MainWindow` ढाँचे में रखें।

## सब कुछ `Component` है, container = Component + Layout
एक `Label` एक `Component` है। एक `Button` एक `Component` है। कोई भी `Component` एक `Layout` पाते ही
**container** बन जाता है, और `add(...)` व्यवस्था को layout को सौंप देता है।
```java
Component painel = new Component();
painel.setLayout(new VerticalLayout());
painel.add(LAY_AUTO, new Label("Título"));
```

## जीवन-चक्र
| हुक | कब | उपयोग |
|---|---|---|
| `onAdd(boolean firstTime)` | पेड़ में प्रवेश करते समय | आरंभीकरण (संसाधन केवल पहली बार → `firstTime`) |
| `onRemove()` | बाहर निकलते समय | timers/listeners मुक्त करना |

## `bind(...)` के साथ पुन:उपयोग योग्य कॉम्पोनेंट
पुनर्चक्रण योग्य "card" का पैटर्न: संरचना को **एक बार** बनाएँ (`onAdd` में) और डेटा से **पुन:जोड़ें**:
```java
public class CardTarefa extends Component {
   private final Label titulo = new Label();
   @Override public void onAdd(boolean firstTime) throws Exception {
      super.onAdd(firstTime);
      setLayout(new HorizontalLayout());
      add(LAY_FILL, titulo);
   }
   public void bind(Tarefa t) {      // डेटा के अनुसार फिर से बांधता है (सस्ता, कई बार बुलाया जाता है)
      titulo.setText(t.titulo);
      repaint();
   }
}
```
यह ठीक वही पैटर्न है जिसका उपयोग `VirtualListView` views को पुनर्चक्रित करने के लिए करता है (देखें
[डेटा लोड करना](/docs/learn/loading-data))।

## इस चरण में क्या बनाया जाता है
पुन:उपयोग योग्य **`CardTarefa`** कॉम्पोनेंट — एक बार बनाया गया, प्रत्येक कार्य के लिए पुन:जोड़ा गया।

## पुनरावलोकन
`Component` आधार है; container = `Component` + `Layout`; `onAdd(firstTime)` में आरंभ करें, `onRemove()` में
मुक्त करें; custom कॉम्पोनेंट **बनाना** (एक बार) को **जोड़ना** (`bind`, कई बार) से अलग करते हैं।

## अगले कदम
→ [Layouts](/docs/learn/layouts)

## यह भी देखें
- अवधारणा: [सब कुछ एक Component है](/docs/concepts/everything-is-a-component) · [जीवन-चक्र](/docs/concepts/lifecycle)