المقابلات التي تركز على الواجهة الأمامية غالبًا لا تهتم بـ DSA على الإطلاق.

وبالنسبة لأولئك منا الذين يتذكرون دراسة DSA في المدرسة/الكلية، كانت جميع الأمثلة تبدو خوارزمية بحتة (لسبب وجيه)، ولكن لم يكن هناك أي أمثلة أو إرشادات حول كيفية استفادة المنتجات التي نستخدمها كل يوم من هذا المفهوم.

"هل سأحتاج إلى هذا؟"
لقد سألت هذا كثيرًا، أليس كذلك؟ ?

إليك بعض هياكل البيانات التي يمكنك الاستفادة منها في تطبيق React الخاص بك اليوم! ?

جدول المحتويات

1. مقدمة
2. المصفوفات: وجهتك المفضلة في إدارة الحالة
3. الكائنات وخرائط التجزئة: مخزن بيانات موحد لتحقيق الكفاءة
4. القوائم المرتبطة بشكل مزدوج: التنقل مع السياق
5. الأكوام: وظيفة التراجع/الإعادة مع سلوك غير قابل للتغيير
6. قوائم الانتظار: إدارة استدعاءات واجهة برمجة التطبيقات المتسلسلة
7. الأشجار: عرض المكونات المتكررة
8. الرسوم البيانية: بناء علاقات البيانات المعقدة والتنقل
9. خاتمة

القراءة ذات الصلة:

الانتقال من SDE1 إلى SDE2 وما بعده! ؟ ما يتطلبه الأمر في الواقع.

جايانت بهاوال للبرمجيات الوسيطة ・ 10 يونيو

#حياة مهنية #ترقية #webdev #مبتدئين

1. المصفوفات؟: وجهتك المفضلة في إدارة الدولة

المصفوفات موجودة في كل مكان في React. إذا كنت بحاجة إلى مساعدة في فهم كيفية عمل .map() أو .filter()، فمن المحتمل أنك ترى هذا المنشور في وقت مبكر جدًا! لكن لا تقلق، بمجرد أن تعتاد على أساليب المصفوفة هذه، سترى مدى أهميتها في عرض القوائم، وإدارة حالات المكونات، وتحويل البيانات.

2. الكائنات وخرائط التجزئة ️: مخزن بيانات طبيعي لتحقيق الكفاءة

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

مثال: القراءة من متجر عادي باستخدام المعرفات

const postsById = {
  1: { id: 1, title: 'First Post', content: 'Content of first post' },
  2: { id: 2, title: 'Second Post', content: 'Content of second post' }
};

const postIds = [1, 2];

function PostList() {
  return (
    

      {postIds.map(id => (
        
      ))}
    
  );
}

function Post({ post }) {
  return (
    

      
{post.title}
      
{post.content}
    
  );
}

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

3. القوائم المرتبطة بشكل مضاعف؟: التنقل مع السياق

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

مثال: قائمة مرتبطة بشكل مزدوج للتنقل بين العناصر ذات السياق

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
    this.prev = null;
  }
}

class DoublyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  add(value) {
    const newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;
      newNode.prev = this.tail;
      this.tail = newNode;
    }
  }
}

const imageList = new DoublyLinkedList();
imageList.add({ id: 1, src: 'image1.jpg', alt: 'First Image' });
imageList.add({ id: 2, src: 'image2.jpg', alt: 'Second Image' });
imageList.add({ id: 3, src: 'image3.jpg', alt: 'Third Image' });

function Gallery() {
  const [currentNode, setCurrentNode] = useState(imageList.head);

  return (
    

      {currentNode.prev && (
        
      )}
      
      {currentNode.next && (
        
      )}
      

         setCurrentNode(currentNode.prev)} disabled={!currentNode.prev}>
          Previous
        
         setCurrentNode(currentNode.next)} disabled={!currentNode.next}>
          Next
        
      
    
  );
}

في مكون التفاعل هذا:

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

4. الأكوام؟: وظيفة التراجع/الإعادة مع سلوك غير قابل للتغيير

تسمح لك الحزم المكدسة بإدارة عمليات التراجع/الإعادة بكفاءة باستخدام منطق آخر ما يدخل، يخرج أولاً (LIFO). باستخدام العمليات غير القابلة للتغيير (concat، Slice)، يمكننا ضمان بقاء الحالة دون تغيير.

مثال: تراجع/إعادة باستخدام الدفع والبوب ​​غير القابل للتغيير

const [undoStack, setUndoStack] = useState([]);
const [redoStack, setRedoStack] = useState([]);
const [formState, setFormState] = useState({ name: '', email: '' });

const updateForm = (newState) => {
  setUndoStack(prev => prev.concat([formState]));  // Immutable push
  setRedoStack([]);  // Clear redo stack
  setFormState(newState);
};

const undo = () => {
  if (undoStack.length > 0) {
    const lastState = undoStack.at(-1);
    setUndoStack(prev => prev.slice(0, -1));  // Immutable pop
    setRedoStack(prev => prev.concat([formState]));  // Move current state to redo
    setFormState(lastState);
  }
};

const redo = () => {
  if (redoStack.length > 0) {
    const lastRedo = redoStack.at(-1);
    setRedoStack(prev => prev.slice(0, -1));  // Immutable pop
    setUndoStack(prev => prev.concat([formState]));  // Push current state to undo
    setFormState(lastRedo);
  }
};

5. قوائم الانتظار؟: إدارة مكالمات API المتسلسلة

تعمل قوائم الانتظار بطريقة الوارد أولاً، يخرج أولاً (FIFO) وهي رائعة لضمان معالجة المهام مثل مكالمات واجهة برمجة التطبيقات أو الإشعارات بالترتيب الصحيح.

مثال: استدعاءات واجهة برمجة التطبيقات في قائمة الانتظار

const [apiQueue, setApiQueue] = useState([]);

const enqueueApiCall = (apiCall) => {
  setApiQueue(prevQueue => prevQueue.concat([apiCall]));  // Immutable push
};

const processQueue = () => {
  if (apiQueue.length > 0) {
    const [nextCall, ...restQueue] = apiQueue;
    nextCall().finally(() => setApiQueue(restQueue));  // Immutable pop
  }
};

6. الأشجار؟: تقديم المكونات العودية

تُستخدم الأشجار بشكل شائع في React عند التعامل مع المكونات المتداخلة مثل سلاسل التعليقات، هياكل المجلدات، أو القوائم.

مثال: عرض شجرة التعليقات بشكل متكرر

const commentTree = {
  id: 1,
  text: "First comment",
  children: [
    { id: 2, text: "Reply to first comment", children: [] },
    { id: 3, text: "Another reply", children: [{ id: 4, text: "Nested reply" }] }
  ]
};

function Comment({ comment }) {
  return (
    

      
{comment.text}
      {comment.children?.map(child => (
        

          
      ))}
    
  );
}

منشور شائع آخر قد يكون ذا صلة بك:

اكتب أقل ولا تصلح أبدًا: فن البرمجة الموثوقة للغاية

Dhruv Agarwal للبرمجيات الوسيطة ・ 17 يونيو

#developer #إنتاجية #برمجة #حياة مهنية

7. الرسوم البيانية؟: بناء علاقات البيانات المعقدة والتنقل

مثال 1: التوجيه بين طرق عرض متعددة
يمكنك تمثيل المسارات بين الصفحات كرسم بياني، مما يضمن مسارات تنقل مرنة في SPA.

const routesGraph = {
  home: ['about', 'contact'],
  about: ['home', 'team'],
  contact: ['home'],
};

function navigate(currentRoute, targetRoute) {
  if (routesGraph[currentRoute].includes(targetRoute)) {
    console.log(`Navigating from ${currentRoute} to ${targetRoute}`);
  } else {
    console.log(`Invalid route from ${currentRoute} to ${targetRoute}`);
  }
}

مثال 2: نمذجة علاقات المستخدم
تعتبر الرسوم البيانية مثالية لنمذجة الاتصالات الاجتماعية أو أي نوع من العلاقات حيث تكون كيانات متعددة مترابطة.

const usersGraph = {
  user1: ['user2', 'user3'],
  user2: ['user1', 'user4'],
  user3: ['user1'],
  user4: ['user2']
};

function findConnections(userId) {
  return usersGraph[userId] || [];
}

console.log(findConnections('user1'));  // Outputs: ['user2', 'user3']

ملاحظة: نحن نستخدم الرسوم البيانية لإظهار تبعيات المراجع في البرامج الوسيطة.

TL;DR - تلك الدروس المدرسية تؤتي ثمارها

ربما بدت فئات DSA هذه مجردة في الماضي، لكن هياكل البيانات تعمل على تشغيل العالم من حولك في React.

إن الكائنات والمكدسات وقوائم الانتظار والقوائم المرتبطة والأشجار والرسوم البيانية ليست مجرد نظرية - فهي العمود الفقري للتطبيقات النظيفة والفعالة والقابلة للتطوير التي تنشئها كل يوم.

لذا، في المرة القادمة التي تدير فيها الحالة في قائمة الانتظار أو تتعامل مع منطق واجهة المستخدم المعقد، تذكر: لقد تدربت على هذا منذ المدرسة. ?

أسمح لي أن أعرف ما هي هياكل البيانات التي تستخدمها أكثر من غيرها!