# Filosofia: CrossFly vs. declarativo-reativo

> A mudança de mentalidade compartilhada por quem vem de Flutter, Compose, SwiftUI ou React Native.

Source: https://crossfly.dev/pt/docs/migrate/overview — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Filosofia: CrossFly vs. declarativo-reativo

Antes das tabelas de tradução por origem, o **contrato mental** que vale para todas.

## A única mudança que importa
> **Frameworks declarativo-reativos** (Flutter, Compose, SwiftUI, React Native) descrevem a UI como
> **função do estado** e a **reconstroem** quando o estado muda. **CrossFly é imperativo e orientado a
> objetos:** você cria objetos `Component` **mutáveis uma vez** (em `onShow()`), **guarda referências**,
> **altera propriedades** e chama `repaint()`.

Não há `build()` reexecutado, não há `setState`, não há `async/await`. O ponto em comum com
Flutter/Compose: **tudo é renderizado via GPU** (OpenGL/WebGL), sem widgets nativos — a aparência é
idêntica em todas as plataformas.

## O de-para dos 4 pilares
| No seu framework | No CrossFly |
|---|---|
| `build()`/`body` reexecutado | monta **uma vez** em `onShow()`; depois você muta objetos |
| `setState`/`@State`/`useState` → rebuild | mudar campo + **`repaint()`** (+ `setValidLayout(false)` se o tamanho mudou) |
| widgets de layout aninhados | `add(valor, comp)` — **`LAY_AUTO`(0f) / `LAY_FILL`(-1f) / fração** |
| `async`/`await`/`Future` | **`Thread`** + **`Component.onUI(...)`** (threading explícito) |

## O contador, os dois modelos
```java
// Declarativo-reativo (pseudo): o estado muda → a UI é reconstruída sozinha.
// CrossFly: você guarda a referência e atualiza na mão.
public class Contador extends Window {
   private int n = 0;
   private Label display;
   @Override public void onShow() throws Exception {
      super.onShow();
      setLayout(new VerticalLayout());
      add(LAY_AUTO, display = new Label("0"));
      Button mais = new Button("+");
      mais.onAction(c -> { n++; display.setText(String.valueOf(n)); });  // muta + repinta
      add(LAY_AUTO, mais);
   }
}
```

## Armadilhas universais (valem para toda origem)
- **Guarde referências** aos componentes que você vai atualizar (campos da `Window`) — não há como
  "reencontrá-los" por reconstrução.
- **Padding/margem** não são widgets: são `ingap`/`outgap` no **estilo** do componente.
- **Sem hot-reload** — é Java compilado (no desktop o ciclo é rápido; ver [platforms](/docs/platforms)).
- **i18n de textos é manual** — não há catálogo de strings embutido (ver [i18n](/docs/best-practices/internacionalizacao)).
- **Cores são `int` ARGB `0xAARRGGBB`** — não há classe `Color` (use `UIConstants`/`ColorUtils`).

## Escolha sua origem
[Flutter](/docs/migrate/from-flutter) · [Jetpack Compose](/docs/migrate/from-jetpack-compose) ·
[SwiftUI](/docs/migrate/from-swiftui) · [React Native](/docs/migrate/from-react-native) ·
[TotalCross/SuperWaba](/docs/migrate/from-totalcross)

## Veja também
- Conceito: [Estado e fluxo de dados](/docs/concepts/state-and-data-flow) · [Tudo é um Component](/docs/concepts/everything-is-a-component)