react4s

React4s

O React4S é uma biblioteca Scala para interface do usuário do front -end. Ele envolve a biblioteca React do Facebook. Ele expõe uma API que facilita a redação do código Scala simples e simples para seus componentes. Você obtém o indispensável shouldComponentUpdate() gratuitamente, não é necessária uma memórias de retorno de chamada. Ele não usa macros, implicits nem tipos complicados.

Veja a documentação em react4s.org • Veja ToDomvc

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

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

Isso define um componente OkCancel que leva uma string "Prop" denominada label . Você lê adereços, estado etc. com o objeto get , que só está disponível onde você pode ler com segurança. O Boolean no Component[Boolean] diz que esse componente emite mensagens Boolean , o que é feito com o método emit(...) . O método render() é o que torna seu componente e o componente é renderizado automaticamente quando os adereços ou o estado mudam. Os objetos E , A e S fornecem métodos para criar o DOM virtual.

Emitir mensagens em vez de receber retornos de chamada via adereços é um afastamento da API React usual e é como você obtém shouldComponentUpdate() gratuitamente. Também separa claramente a entrada (adereços) da saída (retornos de chamada).

Você pode usar um componente como este: Component(OkCancel, "Would you like some icecream?") . O primeiro argumento é o objeto de componentes. Os argumentos restantes são os adereços para o componente.

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

O tipo State permite que a biblioteca detecte quando você atualiza o estado, para que ele possa render seu componente. Você pode ler com por exemplo. okClicks() e atualize -o com por exemplo. okClicks.set(42) ou okClicks.modify(_ + 1) .

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

O acima usa um estilo embutido S.color.rgb(0, 0, 255) e uma classe CSS FancyButtonCss . A classe CSS é definida da seguinte maneira:

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

Ele estiliza um botão para ser branco com uma borda preta e preto com texto branco quando o mouse está pairado sobre ele. O <style>...</style> será adicionado ao DOM na primeira vez que FancyButtonCss é usado para renderizar um componente.

Ligando -o ao DOM

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

Basta criar o componente e chamar renderToDomById . O argumento "main" é o ID que se refere a um elemento HTML existente, por exemplo. <div id="main"></div> .

Desempenho

No React, você implementa shouldComponentUpdate() para evitar renderização componentes não relacionados quando o seu modelo for atualizado. No React4s, esse método já foi implementado para você. Ele usa o Scala's != Operador para verificar se algum adereço foi alterado e apenas atualiza o componente se os adereços alterados ou o estado tiver sido atualizado. Isso significa que, para tudo o que não foi realocado, ele apenas compara as referências e, portanto, não atravessa profundamente os adereços.

Cuidado que o que você passa por adereços deve ser imutável e ter igualdade estrutural. Você não pode passar objetos ou funções mutáveis como adereços, ou terá uma visão obsoleta ou uma visão lenta, respectivamente. No entanto, é completamente seguro passar coleções imutáveis e classes de casos imutáveis.

Vida útil

Este é o ciclo de vida completo do componente para react4s. É mais simples que o reagir simples, porque o modelo React4S assume que seus adereços são imutáveis e têm igualdade estrutural.

1. Quando seu componente é adicionado ao DOM virtual, o construtor é chamado.
2. Antes de cada renderização, o método ComponentWillRender () é chamado. Aqui você pode atualizar qualquer estado que dependa de adereços que foram alterados.
3. Em seguida, em render (), você retornará o DOM virual que exibe seu componente. As atualizações do estado não são permitidas durante esta chamada.
4. Quando o seu componente é removido do DOM virtual, o componentewillunmount () é chamado.

O componente só será renderizado quando seus adereços forem alterados, conforme definido pela desigualdade estrutural de Scala != , Ou seu estado foi atualizado. O estado é considerado atualizado quando você chamou update() explicitamente ou chamada .set(...) ou .modify(...) em objetos de estado com um valor diferente do anterior De acordo com o != Operador.

Você pode anexar os anexos que ouvem esses eventos do ciclo de vida e o React4s vem com três deles: Timeout , Debounce e Loader . Veja como eles são usados nos exemplos on -line.