react4s

React4s

React4s es una biblioteca Scala para la interfaz de usuario frontend. Envuelve la biblioteca React de Facebook. Expone una API que facilita la escritura de código SCALA simple y simple para sus componentes. Usted obtiene el indispensable shouldComponentUpdate() de forma gratuita, no se requiere memoización de devolución de llamada. No usa macros, ni implicados ni tipos complicados.

Consulte la documentación en React4s.org • Vista a DomVC

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

Escribir un componente

 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 ))
            )
        )
    )
}

Esto define un componente OkCancel que toma una cadena "Prop" llamada label . Lee accesorios, estado, etc. con el objeto get , que solo está disponible donde puede leer de manera segura de estos. El Boolean en Component[Boolean] dice que este componente emite mensajes Boolean , que se realiza con el método emit(...) . El método render() es lo que hace que su componente, y el componente se repite automáticamente cuando los accesorios o el estado cambian. Los objetos E , A y S proporcionan métodos para construir el DOM virtual.

Emitir mensajes en lugar de tomar devoluciones de llamada a través de accesorios es un desvío de la API React habitual, y es cómo obtienes shouldComponentUpdate() de forma gratuita. También separa claramente la entrada (accesorios) de la salida (devoluciones de llamada).

Puede usar un componente como este: Component(OkCancel, "Would you like some icecream?") . El primer argumento es el objeto de compañía de componentes. Los argumentos restantes son los accesorios para el componente.

Mantener el estado

 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. " ))
    )
    
}

El tipo State permite que la biblioteca detecte cuando actualiza el estado, para que pueda volver a repender su componente. Puedes leerlo con Eg. okClicks() y actualizarlo con EG. okClicks.set(42) o okClicks.modify(_ + 1) .

Estilos y 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 ))
            )
        )
    )
}

Lo anterior usa un estilo en línea S.color.rgb(0, 0, 255) y One CSS Class FancyButtonCss . La clase CSS se define de la siguiente manera:

 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 )
    )
)

Estiliza un botón para ser blanco con un borde negro, y negro con texto blanco cuando el mouse se desplaza sobre él. El <style>...</style> resultante se agregará al DOM la primera vez que FancyButtonCss se usa para representar un componente.

Vinculándolo al DOM

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

Simplemente cree el componente y llame renderToDomById . El argumento "main" es la ID que se refiere a un elemento HTML existente, por ejemplo. <div id="main"></div> .

Actuación

En React, usted implementa shouldComponentUpdate() para evitar volver a tener componentes no relacionados cuando se actualice su modelo. En React4s, este método ya está implementado para usted. Utiliza el operador de Scala != Para verificar si algún accesorio cambió, y solo actualiza el componente si los accesorios cambiaron o el estado se ha actualizado. Eso significa que para todo lo que no se ha reasignado, solo compara las referencias y, por lo tanto, no atraviesa profundamente los accesorios.

Tenga en cuenta que lo que pasa a través de accesorios debe ser inmutable y tener igualdad estructural. No puede pasar objetos o funciones mutables como accesorios, o obtendrá una vista obsoleta o una vista lenta respectivamente. Sin embargo, es completamente seguro pasar colecciones inmutables y clases de casos inmutables.

Ciclo vital

Este es el ciclo de vida de componente completo para React4s. Es más simple que React Plain porque el modelo React4s supone que sus accesorios son inmutables y tienen igualdad estructural.

1. Cuando se agrega su componente al DOM virtual, se invoca el constructor.
2. Antes de cada renderizado, se llama al método ComponentWillrender (). Aquí puede actualizar cualquier estado que dependa de los accesorios que hayan cambiado.
3. Luego, en Render (), devolverá el DOM Virual que muestra su componente. Las actualizaciones estatales no están permitidas durante esta llamada.
4. Cuando se elimina su componente del DOM virtual, se llama a ComponentWillunMount ().

¡El componente solo se volverá a reproducirse cuando sus accesorios hayan cambiado, según lo definido por la desigualdad estructural de Scala != , O su estado se ha actualizado. El estado se considera actualizado cuando ha llamado update() explícitamente o llamado .set(...) o .modify(...) en objetos de estado con un valor diferente del anterior según el operador !=

Puede unir los ajustables que escuchan en estos eventos del ciclo de vida, y React4s viene con tres de ellos: Timeout , Debounce y Loader . Vea cómo se usan en los ejemplos en línea.