react4s

Bereaksi

React4s adalah perpustakaan Scala untuk Frontend UI. Itu membungkus perpustakaan React Facebook. Ini memperlihatkan API yang membuatnya mudah untuk menulis kode Scala yang sederhana dan sederhana untuk komponen Anda. Anda mendapatkan shouldComponentUpdate() secara gratis, tidak diperlukan memoisasi panggilan balik. Ini tidak menggunakan makro, tidak ada implikasi dan tidak ada tipe yang rumit.

Lihat dokumentasi di react4s.org • Lihat TODOMVC

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

Menulis komponen

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

Ini mendefinisikan komponen OkCancel yang mengambil satu string "prop" label bernama. Anda membaca alat peraga, status, dll. Dengan objek get , yang hanya tersedia di mana Anda dapat membaca dengan aman dari ini. Boolean dalam Component[Boolean] mengatakan bahwa komponen ini memancarkan pesan Boolean , yang dilakukan dengan metode emit(...) . Metode render() adalah apa yang membuat komponen Anda, dan komponen rerender secara otomatis ketika alat peraga atau perubahan status. Objek E , A dan S menyediakan metode untuk membangun DOM virtual.

Memancarkan pesan alih -alih menerima panggilan balik melalui alat peraga adalah penyimpangan dari API React yang biasa, dan bagaimana Anda mendapatkan shouldComponentUpdate() secara gratis. Ini juga dengan jelas memisahkan input (alat peraga) dari output (callbacks).

Anda dapat menggunakan komponen seperti ini: Component(OkCancel, "Would you like some icecream?") . Argumen pertama adalah objek pendamping komponen. Argumen yang tersisa adalah alat peraga untuk komponen.

Menjaga keadaan

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

Jenis State memungkinkan perpustakaan untuk mendeteksi saat Anda memperbarui status, sehingga dapat membuat rerender komponen Anda. Anda dapat membacanya dengan misalnya. okClicks() dan perbarui dengan mis. okClicks.set(42) atau okClicks.modify(_ + 1) .

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

Di atas menggunakan satu gaya inline S.color.rgb(0, 0, 255) dan satu kelas CSS FancyButtonCss . Kelas CSS didefinisikan sebagai berikut:

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

Ini menata tombol untuk menjadi putih dengan perbatasan hitam, dan hitam dengan teks putih saat mouse melayang di atasnya. <style>...</style> yang dihasilkan akan ditambahkan ke DOM saat pertama kali FancyButtonCss digunakan untuk membuat komponen.

Mengikatnya ke dom

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

Cukup buat komponen dan hubungi renderToDomById . Argumen "main" adalah ID yang mengacu pada elemen HTML yang ada, misalnya. <div id="main"></div> .

Pertunjukan

Di React, Anda mengimplementasikan shouldComponentUpdate() untuk menghindari rerendering komponen yang tidak terkait ketika model Anda diperbarui. Di React4s, metode ini sudah diimplementasikan untuk Anda. Ini menggunakan Scala's != Operator untuk memeriksa apakah ada alat peraga yang diubah, dan hanya memperbarui komponen jika salah satu alat peraga diubah atau status telah diperbarui. Itu berarti bahwa untuk semua yang belum dialokasikan kembali, itu hanya membandingkan referensi, dan dengan demikian tidak melintasi jauh ke dalam alat peraga.

Berhati -hatilah bahwa apa yang Anda lewati melalui alat peraga harus tidak dapat diubah dan memiliki kesetaraan struktural. Anda tidak dapat melewati objek atau fungsi yang dapat berubah sebagai alat peraga, atau Anda akan mendapatkan tampilan basi atau tampilan lambat masing -masing. Namun, benar -benar aman untuk lulus koleksi abadi dan kelas kasus yang tidak dapat diubah.

Siklus hidup

Ini adalah siklus hidup komponen lengkap untuk React4s. Ini lebih sederhana dari reaksi polos karena model React4S membuat asumsi bahwa alat peraga Anda tidak berubah dan memiliki kesetaraan struktural.

1. Ketika komponen Anda ditambahkan ke DOM virtual, konstruktor dipanggil.
2. Sebelum setiap render, metode componentwillrender () dipanggil. Di sini Anda dapat memperbarui keadaan apa pun yang tergantung pada alat peraga yang telah berubah.
3. Kemudian di render (), Anda akan mengembalikan DOM virual yang menampilkan komponen Anda. Pembaruan negara tidak diizinkan selama panggilan ini.
4. Ketika komponen Anda dihapus dari DOM virtual, ComponentWillunmount () dipanggil.

Komponen hanya akan rerender ketika alat peraga Anda telah berubah, sebagaimana didefinisikan oleh ketidaksetaraan struktural Scala != , Atau negara Anda telah diperbarui. Negara dianggap diperbarui ketika Anda telah menelepon update() secara eksplisit atau dipanggil .set(...) atau .modify(...) pada objek negara dengan nilai yang berbeda dari sebelumnya menurut operator !=

Anda dapat melampirkan lampiran yang mendengarkan pada acara siklus hidup ini, dan React4s hadir dengan tiga di antaranya: Timeout , Debounce dan Loader . Lihat bagaimana mereka digunakan dalam contoh online.