react4s下載 - react4s源代碼下載

react4s

三方組件

1.0.0

下載

React4s

React4S是用於前端UI的Scala庫。它包裝了Facebook的React庫。它揭示了一個API，使得為您的組件編寫簡單而簡單的Scala代碼變得易於使用。您可以免費獲得必不可少的shouldComponentUpdate() ，無需回調備忘錄。它不使用宏，沒有隱性，也沒有復雜的類型。

請參閱react4s.org的文檔•查看to domvc

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

編寫一個組件

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

這定義了一個組件OkCancel ，該組件以一個名為label的字符串“ Prop”。您可以使用get對象閱讀道具，狀態等，只有可以安全地從中閱讀的地方。 Component[Boolean]中的Boolean [Boolean]說，該組件會發出Boolean消息，這是用emit(...)方法完成的。 render()方法是渲染組件的方法，並且在道具或狀態更改時會自動啟動組件。 E ， A和S對象提供了構建虛擬DOM的方法。

發出消息而不是通過道具接收回調是與通常的React API背道而馳，這是您免費獲得shouldComponentUpdate()方式。它還清楚地將輸入（Prop）與輸出（回調）分開。

您可以使用這樣的組件： Component(OkCancel, "Would you like some icecream?") 。第一個參數是組件伴隨對象。其餘的參數是組件的道具。

保持狀態

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

State類型允許庫檢測您何時更新狀態，以便它可以啟用組件。您可以使用EG閱讀。 okClicks()並使用EG進行更新。 okClicks.set(42)或okClicks.modify(_ + 1) 。

樣式和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 ))
            )
        )
    )
}

上面使用一種內聯樣式S.color.rgb(0, 0, 255)和一個CSS類FancyButtonCss 。 CSS類定義如下：

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

它設計了一個按鈕，是白色的，帶有黑色邊框，當鼠標懸停在鼠標上時，帶有白色文本。首次使用FancyButtonCss渲染組件的結果<style>...</style>將被添加到DOM中。

將其綁定到DOM

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

只需創建組件並調用renderToDomById即可。 "main"參數是涉及現有HTML元素的ID，例如。 <div id="main"></div> 。

表現

在React中，您可以實現shouldComponentUpdate()以避免在更新模型時恢復無關的組件。在React4S中，此方法已經為您實現。它使用Scala's !=操作員檢查是否更改了任何道具，並且僅在更改了道具或狀態已更新的情況下，僅更新組件。這意味著，對於所有尚未重新分配的內容，它只會比較參考文獻，因此不會深入道具。

提防您通過道具通過的東西必須是不變的，並且具有結構平等。您不能將可變的對像或功能作為道具傳遞，也不能分別獲得陳舊的視圖或慢速視圖。但是，通過不變的收藏和不變的案例類是完全安全的。