reflect
v9.2.0
☄ إرفاق متاجر المستجيب لتفاعل المكونات بدون خطافات.
npm install @effector/reflect
# or
pnpm add @effector/reflectالبدء | مستندات API
ما الهدف من الانعكاس؟
إنه تصميم API الذي يتيح لك تصميم API ، باستخدام النمط الكلاسيكي الذي يشبه المخصص ، كتابة مكونات React مع المستجيب بطريقة فعالة وقابلة للتأليف.
import { reflect , variant } from '@effector/reflect' ;
export function UserForm ( ) {
return (
< FormCard >
< Name />
< LastName />
< SubmitButton />
</ FormCard >
) ;
}
const Name = reflect ( {
view : Input ,
bind : {
value : model . $name ,
onChange : model . nameChanged ,
} ,
} ) ;
const LastName = reflect ( {
view : Input ,
bind : {
value : model . $lastName ,
onChange : model . lastNameChanged ,
} ,
} ) ;
const SubmitButton = reflect ( {
view : Button ,
bind : {
type : 'submit' , // plain values are allowed too!
disabled : model . $formValid . map ( ( valid ) => ! valid ) ,
onClick : model . formSubmitted ,
} ,
} ) ; لقد قمنا هنا بفصل هذا المكون إلى أجزاء صغيرة ، والتي تم إنشاؤها بطريقة مريحة باستخدام reflect المشغلين ، وهو وصف بسيط للغاية لرسم props -> values ، وهو أمر أسهل في القراءة والتعديل.
مع @effector/reflect ، لن يتسبب تحديث $formValid الخاص بنا في إعادة تقديم SubmitButton ، ولجميع الأجزاء الأخرى من <UserForm /> سيكون هناك حرفيًا عمل React .
لمعرفة المزيد ، يرجى قراءة مقالة الدافع الكامل.
