react4s

React4s

React4S ist eine Scala -Bibliothek für die Frontend -Benutzeroberfläche. Es wickelt die React -Bibliothek von Facebook. Es enthüllt eine API, die es einfach macht, einfachen und einfachen Skala -Code für Ihre Komponenten zu schreiben. Sie erhalten das unverzichtbare shouldComponentUpdate() kostenlos, keine Rückruf -Memoisierung erforderlich. Es verwendet keine Makros, keine impliziten und keine komplizierten Typen.

Siehe die Dokumentation bei React4s.org • TOMOMVC anzeigen

resolvers += Resolver .sonatypeRepo( " snapshots " )
libraryDependencies += " com.github.ahnfelt " %%% " react4s " % " 0.10.0-SNAPSHOT "

Eine Komponente schreiben

 case class OkCancel ( label : P [ String ]) extends Component [ Boolean ] {
    override def render ( get : Get ) = E .div(
        E .div( Text (get(label)),
        E .div(
            E .button(
                Text ( " OK " ),
                A .onClick(_ => emit( true ))
            ),
            E .button(
                Text ( " Cancel " ),
                A .onClick(_ => emit( false ))
            )
        )
    )
}

Dies definiert eine Komponente OkCancel , die eine Zeichenfolge "Requisite" namens label nimmt. Sie lesen Requisiten, Status usw. mit dem get -Objekt, das nur verfügbar ist, wo Sie sicher davon lesen können. Der Boolean in Component[Boolean] sagt, dass diese Komponente Boolean Nachrichten abgibt, was mit der emit(...) durchgeführt wird. Die render() -Methode macht Ihre Komponente und die Komponente wird automatisch neu geführt, wenn sich die Requisiten oder der Zustand ändern. Die Objekte von E , A und S bieten Methoden zum Erstellen des virtuellen DOM.

Das Ausgeben von Nachrichten, anstatt Rückrufe über Props aufzunehmen shouldComponentUpdate() ist eine Abweichung von der üblichen React -API. Es trennt auch eindeutig Eingabe (Requisiten) von Ausgabe (Rückrufe).

Sie können eine solche Komponente verwenden: Component(OkCancel, "Would you like some icecream?") . Das erste Argument ist das Komponenten -Begleitobjekt. Die verbleibenden Argumente sind die Requisiten für die Komponente.

Zustand halten

 case class Counter () extends Component [ NoEmit ] {
    
    val okClicks = State ( 0 )
    val cancelClicks = State ( 0 )
    
    def onClick ( ok : Boolean ) = {
        if (ok) {
            okClicks.modify(_ + 1 )
        } else {
            cancelClicks.modify(_ + 1 )
        }
    }
    
    override def render ( get : Get ) = E .div(
        Component ( OkCancel , " Would you like some icecream? " ).withHandler(onClick),
        E .hr(),
        E .div( Text ( " You've clicked OK " + get(okClicks) + " times. " )),
        E .div( Text ( " You've clicked Cancel " + get(cancelClicks) + " times. " ))
    )
    
}

Mit dem State -Typ kann die Bibliothek erkennen, wenn Sie den Status aktualisieren, damit Ihre Komponente erneut weiterleitet. Sie können es mit z. okClicks() und aktualisiere es mit z. okClicks.set(42) oder okClicks.modify(_ + 1) .

Stile und CSS

 case class OkCancel ( label : P [ String ]) extends Component [ Boolean ] {
    override def render ( get : Get ) = E .div(
        E .div( Text (get(label)), S .color.rgb( 0 , 0 , 255 )),
        E .div(
            E .button(
                FancyButtonCss ,
                Text ( " OK " ),
                A .onClick(_ => emit( true ))
            ),
            E .button(
                FancyButtonCss ,
                Text ( " Cancel " ),
                A .onClick(_ => emit( false ))
            )
        )
    )
}

Das obige verwendet einen Inline -Stil S.color.rgb(0, 0, 255) und eine CSS -Klasse FancyButtonCss . Die CSS -Klasse ist wie folgt definiert:

 object FancyButtonCss extends CssClass (
    S .cursor.pointer(),
    S .border.px( 2 ).solid().rgb( 0 , 0 , 0 ),
    S .color.rgb( 0 , 0 , 0 ),
    S .backgroundColor.rgb( 255 , 255 , 255 ),
    Css .hover(
        S .color.rgb( 255 , 255 , 255 ),
        S .backgroundColor.rgb( 0 , 0 , 0 )
    )
)

Es stiles eine Knopf, die weiß mit einem schwarzen Rand und schwarz mit weißem Text ist, wenn die Maus darüber schwebt. Das resultierende <style>...</style> wird dem DOM hinzugefügt, wenn das erste Mal FancyButtonCss zum Rendern einer Komponente verwendet wird.

Binden Sie es an den DOM

 object Main extends js. JSApp {
    def main () : Unit = {
        val component = Component ( Counter )
        ReactBridge .renderToDomById(component, " main " )
    }
}

Erstellen Sie einfach die Komponente und rufen Sie renderToDomById auf. Das "main" -Argument ist die ID, die sich auf ein vorhandenes HTML -Element bezieht, z. <div id="main"></div> .

Leistung

In React implementieren Sie shouldComponentUpdate() , um nicht verwandte Komponenten zu vermeiden, wenn Ihr Modell aktualisiert wird. In React4S ist diese Methode bereits für Sie implementiert. Es verwendet Scalas != Das bedeutet, dass es für alles, was nicht realisiert wurde, nur die Referenzen vergleicht und somit nicht tief in die Requisiten übergeht.

Achten Sie darauf, dass das, was Sie über Requisiten bestehen, unveränderlich sein und strukturelle Gleichheit haben. Sie können nicht veränderliche Objekte oder Funktionen als Requisiten übergeben, oder Sie erhalten eine abgestandene Sichtweise bzw. eine langsame Sichtweise. Es ist jedoch völlig sicher, unveränderliche Sammlungen und unveränderliche Fallklassen zu bestehen.

Lebenszyklus

Dies ist der vollständige Komponentenlebenszyklus für React4s. Es ist einfacher als einfach React, da das React4S -Modell davon ausgeht, dass Ihre Requisiten unveränderlich sind und eine strukturelle Gleichheit aufweisen.

1. Wenn Ihre Komponente zum virtuellen DOM hinzugefügt wird, wird der Konstruktor aufgerufen.
2. Vor jedem Rendern wird die Methode componentwillrender () aufgerufen. Hier können Sie jeden Status aktualisieren, der von Requisiten abhängt, die sich geändert haben.
3. In Render () gibt es dann das viruelle DOM zurück, das Ihre Komponente anzeigt. Staatliche Updates sind während dieses Anrufs nicht zulässig.
4. Wenn Ihre Komponente aus dem virtuellen DOM entfernt wird, wird der Komponentiermount () aufgerufen.

Die Komponente wird nur dann erneut geändert, wenn sich Ihre Requisiten geändert haben, wie durch Scalas strukturelle Ungleichheit definiert != Oder Ihr Staat wurde aktualisiert. Der Staat wird != aktualisiert angesehen .modify(...) wenn Sie update() explizit oder .set(...)

Sie können Anhänge anhängen, die diese Lebenszyklusereignisse anhören, und React4s verfügt über drei davon: Timeout , Debounce und Loader . Sehen Sie, wie sie in den Online -Beispielen verwendet werden.