React Concurrent Rendering: فتح الأداء باستخدام بنية Fiber وتحليل حلقة العمل

React، وهي قوة مهيمنة في تطوير الواجهة الأمامية، تطورت باستمرار لتلبية متطلبات واجهات المستخدم المعقدة والتفاعلية بشكل متزايد. أحد أهم التطورات في هذا التطور هو التصيير المتزامن (Concurrent Rendering)، الذي تم تقديمه مع React 16. لقد غيرت هذه النقلة النوعية بشكل جذري كيف تدير React التحديثات وتصيّر المكونات، مما يفتح تحسينات كبيرة في الأداء ويمكّن تجارب مستخدم أكثر استجابة. تتعمق هذه المقالة في المفاهيم الأساسية للتصيير المتزامن، وتستكشف بنية Fiber وحلقة العمل، وتقدم رؤى حول كيفية مساهمة هذه الآليات في تطبيقات React أكثر سلاسة وكفاءة.

فهم الحاجة إلى التصيير المتزامن

قبل التصيير المتزامن، كانت React تعمل بطريقة متزامنة. عندما يحدث تحديث (مثل تغيير الحالة، تحديث الخصائص)، تبدأ React في تصيير شجرة المكونات بأكملها في عملية واحدة وغير منقطعة. يمكن أن يؤدي هذا التصيير المتزامن إلى اختناقات في الأداء، خاصة عند التعامل مع أشجار مكونات كبيرة أو عمليات مكلفة حسابيًا. خلال فترات التصيير هذه، يصبح المتصفح غير مستجيب، مما يؤدي إلى تجربة مستخدم متقطعة ومحبطة. يُشار إلى هذا غالبًا باسم "حظر الخيط الرئيسي" (blocking the main thread).

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

يعالج التصيير المتزامن هذه المشكلة من خلال السماح لـ React بتقسيم مهام التصيير إلى وحدات عمل أصغر وقابلة للإدارة. يمكن تحديد أولويات هذه الوحدات، وإيقافها مؤقتًا، واستئنافها حسب الحاجة، مما يسمح لـ React بتبديل مهام التصيير مع عمليات المتصفح الأخرى، مثل معالجة مدخلات المستخدم أو طلبات الشبكة. يمنع هذا النهج الخيط الرئيسي من أن يتم حظره لفترات طويلة، مما يؤدي إلى تجربة مستخدم أكثر استجابة وسلاسة. فكر في الأمر كأن React تقوم بتعدد المهام في عملية التصيير الخاصة بها.

تقديم بنية Fiber

في قلب التصيير المتزامن تكمن بنية Fiber. يمثل Fiber إعادة تنفيذ كاملة لخوارزمية المصالحة الداخلية لـ React. على عكس عملية المصالحة المتزامنة السابقة، تقدم Fiber نهجًا أكثر تطورًا وتفصيلاً لإدارة التحديثات وتصيير المكونات.

ما هو Fiber؟

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

تشمل الخصائص الرئيسية لعقدة Fiber:

• type: نوع المكون (مثل div، MyComponent).
• key: المفتاح الفريد المعين للمكون (يستخدم للمصالحة الفعالة).
• props: الخصائص التي تم تمريرها إلى المكون.
• child: مؤشر إلى عقدة Fiber التي تمثل الابن الأول للمكون.
• sibling: مؤشر إلى عقدة Fiber التي تمثل الشقيق التالي للمكون.
• return: مؤشر إلى عقدة Fiber التي تمثل الوالد للمكون.
• stateNode: مرجع إلى مثيل المكون الفعلي (مثل عقدة DOM للمكونات المضيفة، مثيل مكون فئة).
• alternate: مؤشر إلى عقدة Fiber التي تمثل الإصدار السابق للمكون.
• effectTag: علامة تشير إلى نوع التحديث المطلوب للمكون (مثل الموضع، التحديث، الحذف).

شجرة Fiber

شجرة Fiber هي بنية بيانات ثابتة تمثل الحالة الحالية لواجهة المستخدم للتطبيق. عند حدوث تحديث، تنشئ React شجرة Fiber جديدة في الخلفية، تمثل الحالة المطلوبة لواجهة المستخدم بعد التحديث. يشار إلى هذه الشجرة الجديدة باسم شجرة "قيد العمل" (work-in-progress). بمجرد اكتمال شجرة قيد العمل، تقوم React بتبديلها مع الشجرة الحالية، مما يجعل التغييرات مرئية للمستخدم.

يسمح هذا النهج المزدوج الشجري لـ React بإجراء تحديثات التصيير بطريقة غير محظورة. تظل الشجرة الحالية مرئية للمستخدم أثناء إنشاء شجرة قيد العمل في الخلفية. هذا يمنع واجهة المستخدم من التجمد أو عدم الاستجابة أثناء التحديثات.

فوائد بنية Fiber

• التصيير القابل للمقاطعة: يمكّن Fiber React من إيقاف مهام التصيير واستئنافها، مما يسمح لها بتحديد أولويات تفاعلات المستخدم ومنع حظر الخيط الرئيسي.
• التصيير التدريجي: يسمح Fiber لـ React بتقسيم تحديثات التصيير إلى وحدات عمل أصغر، والتي يمكن معالجتها تدريجيًا بمرور الوقت.
• تحديد الأولويات: يسمح Fiber لـ React بتحديد أولويات أنواع مختلفة من التحديثات، مما يضمن معالجة التحديثات الهامة (مثل مدخلات المستخدم) قبل التحديثات الأقل أهمية (مثل جلب البيانات في الخلفية).
• تحسين معالجة الأخطاء: يسهل Fiber معالجة الأخطاء أثناء التصيير، حيث يسمح لـ React بالرجوع إلى حالة مستقرة سابقة إذا حدث خطأ.

حلقة العمل: كيف يُمكّن Fiber التزامن

حلقة العمل هي المحرك الذي يدفع التصيير المتزامن. إنها دالة تكرارية تمر عبر شجرة Fiber، وتجري عملًا على كل عقدة Fiber وتحديث واجهة المستخدم بشكل تدريجي. حلقة العمل مسؤولة عن المهام التالية:

• تحديد Fiber التالي للمعالجة.
• إجراء العمل على Fiber (مثل حساب الحالة الجديدة، مقارنة الخصائص، تصيير المكون).
• تحديث شجرة Fiber بنتائج العمل.
• جدولة المزيد من العمل ليتم إنجازه.

مراحل حلقة العمل

تتكون حلقة العمل من مرحلتين رئيسيتين:

1. مرحلة التصيير (المعروفة أيضًا بمرحلة المصالحة): هذه المرحلة مسؤولة عن بناء شجرة Fiber قيد العمل. خلال هذه المرحلة، تمر React عبر شجرة Fiber، وتقارن الشجرة الحالية بالحالة المطلوبة وتحدد التغييرات التي يجب إجراؤها. هذه المرحلة غير متزامنة وقابلة للمقاطعة. إنها تحدد ما *يجب* تغييره في DOM.
2. مرحلة الالتزام (Commit Phase): هذه المرحلة مسؤولة عن تطبيق التغييرات على DOM الفعلي. خلال هذه المرحلة، تقوم React بتحديث عقد DOM، وإضافة عقد جديدة، وإزالة العقد القديمة. هذه المرحلة متزامنة وغير قابلة للمقاطعة. إنها *تغير فعليًا* DOM.

كيف تُمكّن حلقة العمل التزامن

يكمن مفتاح التصيير المتزامن في حقيقة أن مرحلة التصيير غير متزامنة وقابلة للمقاطعة. هذا يعني أن React يمكنها إيقاف مرحلة التصيير في أي وقت للسماح للمتصفح بمعالجة مهام أخرى، مثل مدخلات المستخدم أو طلبات الشبكة. عندما يكون المتصفح خاملًا، يمكن لـ React استئناف مرحلة التصيير من حيث توقفت.

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

تحديد الأولويات في حلقة العمل

تستخدم React خوارزمية جدولة تعتمد على الأولوية لتحديد أي عقد Fiber يجب معالجتها أولاً. تعيّن هذه الخوارزمية مستوى أولوية لكل تحديث بناءً على أهميته. على سبيل المثال، يتم عادةً تعيين التحديثات التي يتم تشغيلها بواسطة مدخلات المستخدم أولوية أعلى من التحديثات التي يتم تشغيلها بواسطة جلب البيانات في الخلفية.

دائمًا ما تعالج حلقة العمل عقد Fiber ذات الأولوية الأعلى أولاً. هذا يضمن معالجة التحديثات الهامة بسرعة، مما يوفر تجربة مستخدم مستجيبة. تتم معالجة التحديثات الأقل أهمية في الخلفية عندما يكون المتصفح خاملًا.

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

أمثلة عملية للتصيير المتزامن قيد التنفيذ

دعنا نلقي نظرة على بعض الأمثلة العملية لكيفية تحسين التصيير المتزامن لأداء وتجربة مستخدم تطبيقات React.

1. تأخير مدخلات المستخدم (Debouncing User Input)

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

مع التصيير المتزامن، يمكننا استخدام التأخير (debouncing) لتأخير تصيير نتائج البحث حتى يتوقف المستخدم عن الكتابة لفترة قصيرة. هذا يسمح لـ React بتحديد أولويات مدخلات المستخدم ومنع واجهة المستخدم من أن تصبح غير مستجيبة.

إليك مثال مبسط:

import React, { useState, useCallback } from 'react';

function SearchBar() {
 const [searchTerm, setSearchTerm] = useState('');

 const debouncedSearch = useCallback(
 debounce((value) => {
 // قم بتنفيذ منطق البحث هنا
 console.log('Searching for:', value);
 }, 300),
 []
 );

 const handleChange = (event) => {
 const value = event.target.value;
 setSearchTerm(value);
 debouncedSearch(value);
 };

 return (
 
 );
}

// دالة التأخير (Debounce function)
function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}

export default SearchBar;

في هذا المثال، تؤخر دالة debounce تنفيذ منطق البحث حتى يتوقف المستخدم عن الكتابة لمدة 300 مللي ثانية. هذا يضمن أن نتائج البحث يتم تصييرها فقط عند الضرورة، مما يحسن أداء التطبيق.

2. التحميل الكسول للصور (Lazy Loading Images)

يمكن أن يؤثر تحميل الصور الكبيرة بشكل كبير على وقت التحميل الأولي لصفحة الويب. مع التصيير المتزامن، يمكننا استخدام التحميل الكسول لتأجيل تحميل الصور حتى تصبح مرئية في منفذ العرض (viewport).

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

إليك مثال مبسط باستخدام مكتبة react-lazyload:

import React from 'react';
import LazyLoad from 'react-lazyload';

function ImageComponent({ src, alt }) {
 return (
 Loading...
}>
 
 
 );
}

export default ImageComponent;

في هذا المثال، تؤجل مكون LazyLoad تحميل الصورة حتى تصبح مرئية في منفذ العرض. تسمح الخاصية placeholder بعرض مؤشر تحميل أثناء تحميل الصورة.

3. Suspense لجلب البيانات

يسمح لك React Suspense "بتعليق" تصيير المكون أثناء انتظار تحميل البيانات. هذا مفيد بشكل خاص لسيناريوهات جلب البيانات، حيث تريد عرض مؤشر تحميل أثناء انتظار البيانات من واجهة برمجة التطبيقات (API).

يتكامل Suspense بسلاسة مع التصيير المتزامن، مما يسمح لـ React بتحديد أولويات تحميل البيانات ومنع واجهة المستخدم من أن تصبح غير مستجيبة.

إليك مثال مبسط:

import React, { Suspense } from 'react';

// دالة جلب بيانات وهمية تعيد Promise
const fetchData = () => {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve({ data: 'Data loaded!' });
 }, 2000);
 });
};

// مكون React يستخدم Suspense
function MyComponent() {
 const resource = fetchData();
 return (
 Loading...