هل من الممكن دون الإعادة؟

اليوم يمكنك أن تجد الكثير من المواقف التي تتطلب رد فعل / إعادة. الرد رائع ، لا توجد أسئلة. والسؤال عن Redux هو ما إذا كان من الممكن بدونه. إذا كنت google قليلاً ، فهناك مقال قوي حول حبري ، حيث يسأل المؤلف نفس السؤال. في مقال يحتوي على مثال بسيط (قائمة todoList) ، يتم استدعاء أسلوب this.updateViews () كثيرًا (من سبع إلى ثماني مرات) ويبدو من الأسهل القيام به.

الفكرة الرئيسية هنا هي النماذج التي يمكن ملاحظتها ، والرد هو المسؤول عن الملاحظة ، والشيء الوحيد المتبقي هو إنشاء نموذج.

قبل إنشاء النموذج ، بضع كلمات حول التصميم (الهندسة المعمارية) للعميل:

مؤشر - البيانات الخام
صفيف التاريخ [نموذج]
مراقب - نموذج
عرض - الأخطاء ، والتركيز ، والأعلام

index.jsx - نقطة إدخال البرنامج لشاشة المستخدم. يعرض الفهرس جميع المكونات بالبيانات الافتراضية ، ويجعل الاستعلامات غير المتزامنة ، يعيد رسم المكونات ببيانات جديدة.

// index.jsx <History> <Observer> <HeaderView /> <MainView /> </Observer> </History> 

Observer.jsx مسؤول عن مزامنة النموذج لطرق عرض متعددة. على سبيل المثال ، تملأ Petya نموذج عرض وتشاهد معاينة في الوقت الفعلي في رأس الصفحة. يقوم المراقب بتخزين كائن النموذج ، وتوفير api: onModelChange (الحقل ، القيمة) للمكونات الفرعية.

History.jsx هي مجموعة من الكائنات النموذجية ، حيث api: الالتزام والتراجع.

Model.js هو ما يمكن للمستخدم إدخاله باستخدام الأقلام - وهذا هو الأكثر قيمة. لا يلزم تخزين البيانات الأخرى في النموذج. النموذج ليس مكون تفاعل ، لكنه فئة شبيبة عادية.

 class Model { constructor(other = {}) {} // copy constructor (and default too) isEqual(other) {} // operator == less(other) {} // operator< swap(other) {} hash() {} fieldNameConstrains() {} //see below please } 

هناك حاجة إلى مُنشئ النسخ على الأقل للتاريخ. طريقة isEqual هي للتغييرات المنبثقة التي لم يتم حفظها (والتي هي أكثر ملاءمة من العلامة في الحالة). طريقة fieldNameConstrains مخصصة للحقول التابعة.

بمعنى تقريبي ، إذا كانت هناك حقول تابعة ، فيجب تغييرها جميعًا على التوالي.

 class Model { // constrains // distance <== velocity * time velocityConstrains(newVelocity) { this.velocity = newVelocity; this.distance = this.velocity * this.time; } timeConstrains(newTime) { … } distanceConstrains(newDistance) { this.distance = newDistance; this.time = this.distance / this.velocity; } } 

من التجربة الشخصية ، لا يعمل شيء مثل model.field.onchange ، حيث إنك في بعض الأحيان تحتاج إلى استدعاء مُنشئ النسخ وليست هناك حاجة إلى أحداث onchange على الإطلاق.

View.jsx

 class View extends React.Component { state = { errors: {}, focus: {}, … } render() { … <input value={this.props.model.title} onChange={e => this.props.onModelChange('title', e.target.value)} /> … } } 

التحقق من الصحة. لا يلزم التحقق من الصحة في النموذج. يجب أن يتم ذلك في العرض (لا تنس أن العرض هو شاشة المستخدم وأنه لا يمكن عرض النموذج بالكامل على الشاشة). المصادقون هم مجموعة من المسندات. لا يوجد سوى خوارزميات اثنين للتحقق من الصحة: ​​1) نجد جميع الأخطاء في النموذج أو 2) نجد الخطأ الأول. على سبيل المثال

 class View extends React.Component { onClickSaveButton() { const mapper = { title: () => model.title.length && !maxLenValidator(model.title, 25), price: () => !(model.price % 40 == 0), url: () => !urlValidator(model.url), … } const errors = map(mapper, (validator, key) => { return validator() ? key : undefined; }).filter(Boolean); } //       

حقوق الوصول. الشيء الرئيسي هنا هو البقاء وعدم استخدام الميراث. الفكرة هي أن النموذج يحتوي على جميع الحقول ونقوم بقص الحقول للأدوار. وهذا هو ، قائمة بيضاء ، تبقى الحقول المتبقية في النموذج بشكل افتراضي. تتم إضافة خطوة واحدة للتحقق من الصحة - نقوم بعمل إسقاط لكائن التحقق من الصحة (كما أنه مخطط ، انظر أعلاه) ، أي أننا نقوم بالتحقق من الحقول الضرورية فقط.

عن الإنتاج. لقد كان هذا النهج في الإنتاج منذ عام - وهو واجهة لإنشاء الحملات الإعلانية ، بما في ذلك لافتات. أشكال مختلفة من التعقيد - تتراوح من نموذج واحد إلى الشاشة ، وتنتهي مع العديد من النماذج من أنواع مختلفة. هنا يمكنك إضافة أن الخلفية يحب إرسال هياكل متداخلة ، ويجب ألا تخجل وتخزين الهياكل المسطحة فقط في العرض.

حول طريقة نموذج isEal. في مكان ما في utils.js سيكون هناك طرق Equal و isqualArray:

  function isEqual(left, right) { return left.isEqual(right); } isEqualArray(v1, v2) { if (v1.length !== v2.length) { return false } for (var k = 0; k != v1.length; k++) { if (!isEqual(v1[k], v2[k])) { return false; } } return true; } 

تحتاج إلى محاولة عدم جعل النماذج متداخلة. لا تنس أن النموذج هو بيانات المستخدم ، وليس بنية البيانات.

المراجع:

→ مرات
→ اثنان