ما هي البيانات غير القابلة للتغيير
تشير البيانات الثابتة إلى البيانات التي لا يمكن تغييرها بمجرد إنشائها.
باستخدام البيانات غير القابلة للتغيير ، يمكننا بسهولة التعامل مع التخزين المؤقت والاحتفالات واكتشاف تغيير البيانات وغيرها من المشكلات ، وتبسيط تطورنا.
البيانات غير القابلة للتغيير في JS
في JavaScript ، يمكننا محاكاة البيانات غير القابلة للتغيير من خلال استنساخ Deep ، مما يعني أنه في كل مرة نعمل فيها على البيانات ، سنستخدم البيانات العميقة لإنشاء بيانات جديدة.
استنساخ عميق
/** * التعلم القابل للتطبيق-clone-deep.js * تم إنشاؤه بواسطة MDS في 15/6/6. */"استخدم صارم" ؛ var clonedeep = require ('lodash.clonedeep') ؛ var data = {id: 'data' ، uperm: {name: 'mdemo' ، github: 'https://github.com/demohi'}} ؛ var data1 = clonedeep (data) ؛ console.log ("المساواة: '، data1 === data) ؛ //falsedata1.id = 'data1' ؛ data1.author.name = 'demohi' ؛ console.log (data.id) ؛ // data console.log (data1.id) ؛ // data1console.log (data.author.name) ؛ // mdemo console.log (data1.author.name) ؛ // demohi) ؛بالطبع قد تدرك أن هذا بطيء للغاية. كما هو موضح أدناه ، فهو بالفعل بطيء للغاية
Immutable.js هو مشروع مفتوح من قبل Facebook. هو أساسا حل مشكلة بيانات جافا سكريبت. يوفر طريقة أكثر كفاءة من خلال الإشارة إلى محاولات خرائط التجزئة ومحاولات المتجهات.
ببساطة ، stemutable.js يحل مشاكل الأداء من خلال المشاركة الهيكلية. دعنا أولاً نشاهد مقطع فيديو لنرى كيف يتم الانتهاء
عند حدوث عملية محددة ، ستستنسى JJs فقط الأجزاء فوق مستوى الأم ، وسيظل الآخرون دون تغيير ، حتى يتمكن الجميع من مشاركة نفس الأجزاء ، والتي يمكن أن تحسن الأداء بشكل كبير.
يجب على أي شخص على دراية بـ React.js أن يعلم أن React.js هو إطار مع واجهة المستخدم = F (الحالات). من أجل حل مشكلة التحديث ، يستخدم React.js DOM الظاهري. يستخدم Virtual DOM Diff لتعديل DOM لتحقيق تحديثات DOM فعالة.
يبدو مثاليًا ، ولكن هناك مشكلة واحدة. عندما يتم تحديث الحالة ، إذا لم تتغير البيانات ، فستقوم أيضًا بعمل DOM DIF ، مما سيؤدي إلى نفايات. هذا الموقف شائع جدًا في الواقع ، يرجى الرجوع إلى المقالة Flummox
بالطبع قد تقول أنه يمكنك استخدام PurerenderMixin لحلها. Purerendermixin شيء جيد ، يمكننا استخدامه لحل بعض المشكلات المذكورة أعلاه ، ولكن إذا كنت تهتم ، يمكنك رؤية المطالبة التالية في المستند.
نسخة الكود كما يلي:
هذا فقط يقارن الكائنات. إذا كانت هذه تحتوي على هياكل معقدة للبيانات ، فقد تنتج عنيفات كاذبة للاختلافات الأعمق. تخلط فقط في المكونات التي لها دعائم وحالة بسيطة ، أو تستخدم ForceUpdate () عندما تعلم أن هياكل البيانات العميقة قد تغيرت. أو النظر في استخدام الكائنات غير القابلة للتغيير لتسهيل المقارنات السريعة للبيانات المتداخلة.
Purerendermixin هو مجرد مقارنة ضحلة بسيطة ولا يتم استخدامها في المقارنات متعددة الطبقات. ماذا علي أن أفعل؟ ؟ إذا قمت بإجراء مقارنات معقدة بنفسك ، فسيكون الأداء سيئًا للغاية.
الحل هو استخدام Immutable.js لحل هذه المشكلة. لأنه طالما كان هناك تغيير في البيانات في كل تحديث حالة ، يمكن لـ PurerenderMixin تحديد تغيير البيانات على الفور ، والذي يمكن أن يحسن الأداء بشكل كبير. يمكن العثور على هذا الجزء أيضًا في مساعدي ثبات الوثائق الرسمية
ملخص: استخدم purerendermixin + Immutable.js
React.js Conf 2015 - بيانات غير قابلة للتفاعل وتفاعل
مساعدي الثبات
Purerendermixin
غير قابل للتغيير