react4s

React4s

React4s เป็นห้องสมุด Scala สำหรับ UI ส่วนหน้า มันห่อไลบรารี React ของ Facebook มันเผยให้เห็น API ที่ทำให้ง่ายต่อการเขียนโค้ด Scala ธรรมดาและเรียบง่ายสำหรับส่วนประกอบของคุณ คุณจะได้รับ shouldComponentUpdate() ที่ขาดไม่ได้ () ฟรีไม่จำเป็นต้องมีการบันทึกการโทรกลับ มันไม่ได้ใช้แมโครไม่มีความหมายและไม่มีประเภทที่ซับซ้อน

ดูเอกสารที่ react4s.org •ดู TODOMVC

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 ที่ใช้หนึ่งสตริง "prop" ชื่อ label ชื่อ คุณอ่านอุปกรณ์ประกอบฉากสถานะ ฯลฯ ด้วยวัตถุ get ซึ่งมีเฉพาะที่คุณสามารถอ่านได้อย่างปลอดภัยจากสิ่งเหล่านี้ Boolean ใน Component[Boolean] บอกว่าส่วนประกอบนี้ปล่อยข้อความ Boolean ซึ่งทำด้วยวิธี emit(...) วิธี render() คือสิ่งที่แสดงผลส่วนประกอบของคุณและส่วนประกอบจะได้รับการ reerender โดยอัตโนมัติเมื่ออุปกรณ์ประกอบฉากหรือการเปลี่ยนแปลงสถานะ วัตถุ E , A และ S ให้วิธีการสร้าง DOM เสมือนจริง

การเปล่งข้อความแทนที่จะรับการโทรกลับผ่านอุปกรณ์ประกอบฉากคือการออกจาก API React ตามปกติและเป็นวิธีที่คุณได้รับ 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() และอัปเดตด้วยเช่น 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 )
    )
)

มันสไตล์ปุ่มเป็นสีขาวที่มีเส้นขอบสีดำและสีดำพร้อมข้อความสีขาวเมื่อเมาส์ลอยอยู่เหนือมัน ผลลัพธ์ <style>...</style> จะถูกเพิ่มลงใน DOM ในครั้งแรกที่ FancyButtonCss ใช้เพื่อแสดงผลส่วนประกอบ

ผูกพันกับ DOM

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

เพียงสร้างส่วนประกอบและเรียก renderToDomById อาร์กิวเมนต์ "main" คือ ID ที่อ้างถึงองค์ประกอบ HTML ที่มีอยู่เช่น <div id="main"></div>

ผลงาน

ใน React คุณใช้ shouldComponentUpdate() เพื่อหลีกเลี่ยงการทำงานส่วนประกอบที่ไม่เกี่ยวข้องเมื่อโมเดลของคุณได้รับการอัปเดต ใน React4s วิธีนี้ได้ถูกนำไปใช้กับคุณแล้ว มันใช้ตัวดำเนินการของ Scala != เพื่อตรวจสอบว่าอุปกรณ์ประกอบฉากใด ๆ เปลี่ยนแปลงหรือไม่และอัปเดตเฉพาะส่วนประกอบหากอุปกรณ์ประกอบฉากเปลี่ยนไปหรือสถานะได้รับการอัปเดต นั่นหมายความว่าสำหรับทุกสิ่งที่ยังไม่ได้รับการจัดสรรใหม่มันเพียงแค่เปรียบเทียบการอ้างอิงและดังนั้นจึงไม่ผ่านลึกเข้าไปในอุปกรณ์ประกอบฉาก

ระวังว่าสิ่งที่คุณผ่านผ่านอุปกรณ์ประกอบฉากจะต้องเปลี่ยนไม่ได้และมีความเท่าเทียมกันทางโครงสร้าง คุณไม่สามารถส่งผ่านวัตถุหรือฟังก์ชั่นที่ไม่แน่นอนเป็นอุปกรณ์ประกอบฉากหรือคุณจะได้รับมุมมองเก่าหรือมุมมองช้าตามลำดับ อย่างไรก็ตามมันปลอดภัยอย่างสมบูรณ์ที่จะผ่านคอลเลกชันที่ไม่เปลี่ยนรูปและชั้นเรียนกรณีที่ไม่เปลี่ยนรูป

วงจรชีวิต

นี่คือวงจรชีวิตส่วนประกอบที่สมบูรณ์สำหรับ React4s มันง่ายกว่า React ธรรมดาเพราะโมเดล React4s ทำให้สมมติฐานว่าอุปกรณ์ประกอบฉากของคุณไม่เปลี่ยนรูปและมีความเท่าเทียมกันของโครงสร้าง

1. เมื่อส่วนประกอบของคุณถูกเพิ่มลงใน DOM เสมือนตัวสร้างจะถูกเรียกใช้
2. ก่อนที่จะเรนเดอร์แต่ละวิธีจะเรียกวิธีการ ComponentWillRender () ที่นี่คุณสามารถอัปเดตสถานะใด ๆ ที่ขึ้นอยู่กับอุปกรณ์ประกอบฉากที่มีการเปลี่ยนแปลง
3. จากนั้นใน Render () คุณจะส่งคืน DOM virual ที่แสดงส่วนประกอบของคุณ ไม่อนุญาตให้อัปเดตสถานะในระหว่างการโทรนี้
4. เมื่อส่วนประกอบของคุณถูกลบออกจาก DOM เสมือน ComponentWillunMount () จะถูกเรียก

ส่วนประกอบจะได้รับการปรับปรุงใหม่เมื่ออุปกรณ์ประกอบฉากของคุณเปลี่ยนไปตามที่กำหนดโดยความไม่เท่าเทียมกันของโครงสร้างของ Scala != หรือสถานะของคุณได้รับการปรับปรุง สถานะได้รับการพิจารณาว่าได้รับการอัปเดตเมื่อคุณเรียกว่า update() อย่างชัดเจนหรือเรียกว่า .set(...) หรือ .modify(...) บนวัตถุสถานะที่มีค่าที่แตกต่างจากก่อนหน้านี้ตามตัวดำเนินการ !=

คุณสามารถแนบไฟล์แนบที่ฟังเหตุการณ์วงจรชีวิตเหล่านี้และ React4s มาพร้อมกับสามสิ่งเหล่านั้น: Timeout , Debounce และ Loader ดูว่าพวกเขาใช้ในตัวอย่างออนไลน์อย่างไร