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

ما هو التقديم؟

التصيير هو العملية التي من خلالها تعرض React واجهة المستخدم (UI) الخاصة بك على الشاشة، بناءً على الحالة أو الخاصيات. عندما يتم تقديم المكون الخاص بك لأول مرة، يطلق عليه اسم العرض الأول.

كيف يعمل العرض الأولي؟

عندما يتم "تركيب" أحد المكونات لأول مرة على DOM، فهذا ما يحدث:

1. تهيئة الحالة:
سواء كنت تستخدم useState، أوprops، أو Redux، فسيتم إنشاء الحالة الأولية للمكون.

2. وظيفة العرض:
تتكرر React عبر كود JSX وتنشئ DOM افتراضيًا بناءً على الحالة الحالية.

3. إنشاء DOM افتراضي (Virtual DOM) للحالة الحالية للمكون.

4. المقارنة (الاختلاف):
تتم مقارنة DOM الافتراضي بـ DOM الحقيقي (نظرًا لأنه أول عرض، سيتم عرض جميع العناصر بالكامل).

5. عرض:
يتم عرض المكون على الشاشة.
بمجرد تقديم المكون، فإن التحدي التالي هو إعادة العرض.

إعادة العرض: متى ولماذا؟

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

كيف تعمل إعادة العرض؟

كشف تغيير الحالة:

• باستخدام useState، عندما تتصل بـ setState، تعلم React أنها بحاجة إلى تحديث المكون.

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

مشغل العرض:

عندما تتغير الحالة، تقوم React بإنشاء DOM افتراضي جديد بناءً على هذا التغيير.

المقارنة (الاختلاف):

• يقوم React بمقارنة DOM الافتراضي الجديد مع القديم ويحسب التغييرات التي سيتم تطبيقها. هذه إحدى الطرق التي تعمل بها React على تحسين العرض.

عرض التغييرات:

• بعد حساب التغييرات، تطبقها React على DOM الفعلي. وبالتالي، يتم عرض الأجزاء التي تم تغييرها فقط من الصفحة مرة أخرى.

ما هي المكونات التي تم إعادة عرضها؟

لا تتأثر كافة المكونات بكل تغيير. React يعيد عرض تلك المكونات التي:

استخدام الولايات المحلية:
إذا كنت تستخدم useState، فسيتم إعادة عرض المكون في كل مرة يتم فيها استدعاء setState.

استخدم حالة Redux:
إذا كان المكون الخاص بك يعتمد على حالة Redux (عبر useSelector أو Connect)، فسيتم إعادة عرضه عندما يتغير هذا الجزء من الحالة.

استخدم الدعائم:
إذا تغيرت قيمة الدعائم، فسيتم إعادة عرض المكون بالقيم الجديدة.

تحسين العرض

بالطبع، ليس من المثالي دائمًا إعادة عرض جميع المكونات دون داع. إذا أردنا أن يعمل التطبيق بسرعة وكفاءة، فإليك بعض تقنيات التحسين:

1. مكونات الحفظ
توفر React وظيفة حفظ المكونات عبر React.memo. إذا كان المكون الخاص بك لا يعتمد على الدعائم أو تغييرات الحالة، فيمكنك "تذكره"، لذلك سيتم إعادة عرضه فقط عندما تتغير القيم ذات الصلة.

مثال:

const MemoizedComponent = React.memo(MyComponent);

2. حفظ الوظائف والقيم

لتجنب إعادة إنشاء الوظائف أو القيم في كل عرض، استخدم useCallback لحفظ الوظائف وuseMemo لحفظ القيم.

• يسمح لك useCallback بحفظ وظيفة ومنع إعادة إنشائها حتى تتغير التبعيات.

• يحفظ useMemo نتيجة الوظيفة، لذلك لا تتم إعادة حسابها في كل عرض.

مثال:

const increment = useCallback(() => {
  setCount(prevCount => prevCount   1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. تحسين الإعادة

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

خطافات دورة الحياة والعرض

في فئات React الكلاسيكية، استخدمنا mustComponentUpdate للتحكم في وقت إعادة تصيير المكون. في المكونات الوظيفية، يمكن محاكاة هذا المفهوم باستخدام useEffect والحفظ.

خاتمة

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

مثال للتعليمات البرمجية: العرض وإعادة العرض أثناء العمل
فيما يلي مثال لمكون يستخدم useState وRedux وmemoization لتحسين العرض:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount   1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    

      
Count: {count}
      
Expensive Calculation: {expensiveCalculation}
      Increment
       dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      
    
  );
};

كما نرى، يتم هنا استخدام مزيج من الحالة المحلية وRedux والحفظ وخطاف useEffect لجعل التطبيق فعالاً قدر الإمكان.