फ्रंटेंड केंद्रित साक्षात्कार अक्सर डीएसए की बिल्कुल भी परवाह नहीं करते हैं।

और हममें से जो लोग स्कूल/कॉलेज में डीएसए का अध्ययन करना याद करते हैं, उनके लिए सभी उदाहरण पूरी तरह से एल्गोरिथम (अच्छे कारण के लिए) लगे, लेकिन हमारे द्वारा प्रतिदिन उपयोग किए जाने वाले उत्पाद इस अवधारणा का लाभ कैसे उठाते हैं, इस पर शायद ही कोई उदाहरण या मार्गदर्शन था।

"क्या मुझे कभी इसकी आवश्यकता होगी?"
आपने यह बहुत पूछा है, है ना? ?

यहां कुछ डेटा संरचनाएं दी गई हैं जिनका लाभ आप आज अपने रिएक्ट ऐप में उठा सकते हैं! ?

विषयसूची

1. परिचय
2. सरणी: राज्य प्रबंधन में आपका लक्ष्य
3. ऑब्जेक्ट्स और हैश मैप्स: दक्षता के लिए सामान्यीकृत डेटा स्टोर
4. डबल लिंक्ड सूचियां: संदर्भ के साथ नेविगेशन
5. स्टैक्स: अपरिवर्तनीय व्यवहार के साथ कार्यक्षमता को पूर्ववत करें/फिर से करें
6. क्यू: अनुक्रमिक एपीआई कॉल प्रबंधित करना
7. पेड़: पुनरावर्ती घटकों का प्रतिपादन
8. ग्राफ़: जटिल डेटा संबंध और नेविगेशन का निर्माण
9. निष्कर्ष

संबंधित पढ़ना:

एसडीई1 से एसडीई2 और उससे भी आगे जा रहे हैं! ? वास्तव में इसमें क्या लगता है।

मिडलवेयर के लिए जयंत भवाल ・ जून 10

#आजीविका #पदोन्नति #वेबदेव #शुरुआती

1. सारणियाँ?: राज्य प्रबंधन में आपका लक्ष्य

एरे रिएक्ट में हर जगह हैं। यदि आपको यह समझने में सहायता की आवश्यकता है कि .map() या .filter() कैसे काम करते हैं, तो आप शायद इस पोस्ट को बहुत जल्दी देख रहे हैं! लेकिन चिंता न करें - एक बार जब आप इन सरणी विधियों के साथ सहज हो जाते हैं, तो आप देखेंगे कि वे सूचियों को प्रस्तुत करने, घटक स्थितियों को प्रबंधित करने और डेटा को बदलने के लिए कितने आवश्यक हैं।

2. ऑब्जेक्ट और हैश मैप्स?️: दक्षता के लिए सामान्यीकृत डेटा स्टोर

एक रिएक्ट ऐप में, जब आप उपयोगकर्ताओं या पोस्ट जैसी संस्थाओं के एक बड़े संग्रह से निपटते हैं, तो अपने डेटा को ऑब्जेक्ट्स (हैश मैप्स) में सामान्यीकृत करने से पढ़ना और अपडेट करना अधिक कुशल हो सकता है। किसी गहरी नेस्टेड संरचना के साथ काम करने के बजाय, आप इकाइयों को उनकी आईडी के आधार पर मैप करते हैं।

उदाहरण: आईडी के साथ एक सामान्यीकृत स्टोर से पढ़ना

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) तर्क का उपयोग करके कुशलतापूर्वक undo/redo संचालन को प्रबंधित करने की अनुमति देता है। अपरिवर्तनीय संचालन (कॉनकैट, स्लाइस) का उपयोग करके, हम यह सुनिश्चित कर सकते हैं कि स्थिति अपरिवर्तित बनी रहे।

उदाहरण: अपरिवर्तनीय पुश और पॉप के साथ पूर्ववत/पुनः करें

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. कतारें?: अनुक्रमिक एपीआई कॉल का प्रबंधन

कतारें फर्स्ट इन, फर्स्ट आउट (फीफो) तरीके से संचालित होती हैं और यह सुनिश्चित करने के लिए बहुत अच्छी हैं कि एपीआई कॉल या नोटिफिकेशन जैसे कार्यों को सही क्रम में संसाधित किया जाता है।

उदाहरण: एपीआई कॉल कतारबद्ध करना

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. पेड़?: पुनरावर्ती घटकों का प्रतिपादन

टिप्पणी थ्रेड्स, फ़ोल्डर संरचनाएं, या मेनू जैसे नेस्टेड घटकों से निपटने के दौरान आमतौर पर रिएक्ट में पेड़ों का उपयोग किया जाता है।

उदाहरण: एक टिप्पणी वृक्ष को पुनरावर्ती रूप से प्रस्तुत करना

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 => (
        

          
      ))}
    
  );
}

एक और लोकप्रिय पोस्ट जो आपके लिए प्रासंगिक हो सकती है:

कम लिखें, कभी ठीक न करें: अत्यधिक विश्वसनीय कोड की कला

मिडलवेयर के लिए ध्रुव अग्रवाल ・ जून 17

#डेवलपर #उत्पादकता #प्रोग्रामिंग #आजीविका

7. ग्राफ़?: जटिल डेटा संबंध और नेविगेशन का निर्माण

उदाहरण 1: एकाधिक दृश्यों के बीच रूटिंग
आप एसपीए में लचीले नेविगेशन पथ सुनिश्चित करते हुए, पृष्ठों के बीच के मार्गों को एक ग्राफ़ के रूप में प्रस्तुत कर सकते हैं।

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']

नोट: हम मिडिलवेयर में समीक्षक निर्भरता दिखाने के लिए ग्राफ़ का उपयोग करते हैं।

टीएल;डीआर - स्कूल के उन पाठों का फल मिलता है

वे डीएसए कक्षाएं पहले अमूर्त लगती होंगी, लेकिन डेटा संरचनाएं रिएक्ट में आपके आसपास की दुनिया को शक्ति प्रदान कर रही हैं।

ऑब्जेक्ट्स, स्टैक, कतारें, लिंक्ड सूचियां, पेड़ और ग्राफ़ केवल सिद्धांत से कहीं अधिक हैं - वे आपके द्वारा हर दिन बनाए जाने वाले स्वच्छ, कुशल और स्केलेबल ऐप्स की रीढ़ हैं।

तो अगली बार जब आप किसी कतार में राज्य का प्रबंधन करें या जटिल यूआई तर्क को संभालें, तो याद रखें: आप स्कूल से ही इसके लिए प्रशिक्षण ले रहे हैं। ?

मुझे बताएं कि आप कौन सी डेटा संरचनाओं का सबसे अधिक उपयोग कर रहे हैं!