react4s

React4s

React4s هي مكتبة Scala لـ Frontend UI. يلف مكتبة رد الفعل في Facebook. إنه يعرض واجهة برمجة التطبيقات التي تجعل من السهل كتابة رمز سكالا عادي وبسيط لمكوناتك. يمكنك الحصول على لا غنى عنه shouldComponentUpdate() مجانًا ، لا مطلوب مذكرات رد الاتصال. لا يستخدم أي وحدات ماكرو ، ولا ضمنية ولا أنواع معقدة.

انظر الوثائق في React4S.org • عرض TODODVC

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 in Component[Boolean] أن هذا المكون ينبعث من الرسائل Boolean ، والتي تتم مع طريقة emit(...) . طريقة render() هي ما يجعل المكون الخاص بك ، ويتم إعادة المكون تلقائيًا عند تغيير الدعائم أو الحالة. توفر كائنات 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 للمكتبة بالاكتشاف عند تحديث الحالة ، بحيث يمكنها إعادة مكونك. يمكنك قراءته مع 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 )
    )
)

إنه يحمل زرًا ليكون أبيضًا مع حدود سوداء ، والأسود مع نص أبيض عندما يتم تحوم الماوس فوقه. سيتم إضافة <style>...</style> إلى DOM في المرة الأولى التي يتم فيها استخدام FancyButtonCss لتقديم مكون.

ربطها بـ DOM

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

مجرد إنشاء المكون واتصل renderToDomById . الوسيطة "main" هي المعرف الذي يشير إلى عنصر HTML موجود ، على سبيل المثال. <div id="main"></div> .

أداء

في React ، تقوم بتنفيذ shouldComponentUpdate() لتجنب إعادة صياغة المكونات غير ذات الصلة عند تحديث النموذج الخاص بك. في React4s ، تم تنفيذ هذه الطريقة بالفعل لك. يستخدم Scala's != المشغل للتحقق مما إذا كانت أي دعائم قد تم تغييره ، ويقوم فقط بتحديث المكون إذا تم تغيير الدعائم أو تم تحديث الحالة. هذا يعني أنه بالنسبة لكل ما لم يتم إعادة تخصيصه ، فإنه يقارن المراجع فقط ، وبالتالي لا يجتاز عمق الدعائم.

احذر من أن ما تمريره عبر الدعائم يجب أن يكون غير قابل للتغيير ولديه مساواة هيكلية. لا يمكنك تمرير كائنات أو وظائف قابلة للتغيير كدعائم ، أو ستحصل على طريقة عرض قديمة أو عرض بطيء على التوالي. ومع ذلك ، من الآمن تمرير مجموعات غير قابلة للتغيير وفئات الحالات غير القابلة للتغيير.

دورة الحياة

هذه هي دورة حياة المكون الكاملة لـ React4s. إنه أبسط من رد الفعل العادي لأن نموذج React4s يجعل افتراض أن الدعائم الخاصة بك غير قابلة للتغيير ولديها مساواة هيكلية.

1. عند إضافة مكونك إلى DOM الظاهري ، يتم استدعاء المنشئ.
2. قبل كل عرض ، يتم استدعاء طريقة ComponentWillRender (). هنا يمكنك تحديث أي حالة تعتمد على الدعائم التي تغيرت.
3. ثم في Render () ، ستقوم بإرجاع DOM الفيروسي الذي يعرض المكون الخاص بك. لا يُسمح بتحديثات الدولة أثناء هذه المكالمة.
4. عند إزالة المكون الخاص بك من DOM الظاهري ، يتم استدعاء ComponentWillunMount ().

لن يتم إعادة تقديم المكون إلا عند تغيير الدعائم الخاصة بك ، على النحو المحدد من قبل عدم المساواة الهيكلية لـ Scala != ، أو تم تحديث ولايتك. يتم تحديث الحالة عند استدعاء update() بشكل صريح أو تسمى .set(...) .modify(...) !=

يمكنك إرفاق الأقراص التي تستمع إلى أحداث دورة الحياة هذه ، ويأتي React4s مع ثلاثة من هذه: Timeout ، Debounce و Loader . تعرف على كيفية استخدامها في الأمثلة عبر الإنترنت.