react4s
1.0.0
React4s는 Frontend UI의 스칼라 라이브러리입니다. Facebook의 React Library를 랩핑합니다. 구성 요소에 대해 일반적이고 간단한 스칼라 코드를 쉽게 작성할 수있는 API를 노출시킵니다. 당신은 필수품을 무료로 shouldComponentUpdate() 있는 콜백 메모리를 무료로 제공합니다. 그것은 매크로, 암시 및 복잡한 유형이 없음을 사용합니다.
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 ))
)
)
)
} 이것은 하나의 문자열 "prop"라는 label 취하는 구성 요소 OkCancel 정의합니다. get Object를 사용하여 소품, 상태 등을 읽습니다.이 제품은 안전하게 읽을 수있는 곳에서만 사용할 수 있습니다. 구성 요소의 Boolean Component[Boolean] 은이 구성 요소 Boolean 메시지를 방출한다고 말하며, 이는 emit(...) 메소드로 수행됩니다. render() 메소드는 구성 요소를 렌더링하는 것이며 소품이나 상태가 변경 될 때 구성 요소가 자동으로 재실행됩니다. E , A 및 S 객체는 가상 DOM을 구축하는 방법을 제공합니다.
소품을 통해 콜백을 사용하는 대신 메시지를 방출하는 것은 일반적인 React API에서 벗어나는 것이며, 무료로 shouldComponentUpdate() 얻는 방법입니다. 또한 출력 (콜백)에서 입력 (소품)을 명확하게 분리합니다.
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 유형을 사용하면 상태를 업데이트 할 때 라이브러리가 감지 할 수 있으므로 구성 요소를 다시 렌더링 할 수 있습니다. 예를 들어 읽을 수 있습니다. okClicks() 를 통해 eg로 업데이트하십시오. okClicks.set(42) 또는 okClicks.modify(_ + 1) .
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 )
)
) 그것은 검은 테두리가있는 흰색으로, 마우스가 맴돌 때 흰색 텍스트가있는 검은 색의 스타일을 스타일링합니다. 결과 <style>...</style> 은 FancyButtonCss 처음으로 구성 요소를 렌더링하는 데 사용되는 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() 봐야합니다. React4 에서이 방법은 이미 구현되었습니다. Scala 's != 운영자를 사용하여 소품이 변경되었는지 확인하고 소품이 변경되었거나 상태가 업데이트 된 경우에만 구성 요소 만 업데이트합니다. 즉, 재 할당되지 않은 모든 것에 대해 참조를 비교하므로 소품으로 깊숙이 횡단되지 않습니다.
소품을 통해 전달하는 것은 불변이어야하고 구조적 평등을 가져야한다는 것을 조심하십시오. 돌연변이 가능한 객체 나 기능을 소품으로 전달할 수 없거나 각각 오래된보기 또는 느린보기를 얻을 수 있습니다. 그러나 불변의 컬렉션과 불변의 사례 수업을 통과하는 것은 완전히 안전합니다.
이것은 React4의 완전한 구성 요소 수명주기입니다. React4s 모델이 소품이 불변하고 구조적 평등이 있다고 가정하기 때문에 일반 React보다 간단합니다.
Scala의 구조적 불평등에 의해 정의 된대로, 귀하의 소품이 변경되었을 때만 구성 요소가 재실행됩니다 != 또는 주 상태가 업데이트되었습니다. 상태는 update() 명시 적으로 호출하거나 .set(...) 또는 .modify(...) != 했을 때 업데이트 된 것으로 간주됩니다.
이러한 수명주기 이벤트에서 듣는 부착물을 부착 할 수 있으며 React4에는 Timeout , Debounce 및 Loader 의 세 가지가 함께 제공됩니다. 온라인 예제에서 어떻게 사용되는지 확인하십시오.
