前端開發 + 資料結構與演算法：DSA 如何為您的 React 應用程式提供動力 ⚡

以前端為中心的面試通常根本不關心 DSA。

對於我們這些記得在學校/大學學習過DSA 的人來說，所有的例子都感覺純粹是演算法（有充分的理由），但幾乎沒有任何例子或指導來說明我們每天使用的產品如何利用這個概念。

「我需要這個嗎？」
你已經問過很多次這個問題了，不是嗎？ ？

以下是您今天可以在 React 應用程式中利用的一些資料結構！ ？

目錄

1. 簡介
2. 陣列：狀態管理的首選
3. 物件和雜湊圖：標準化資料儲存以提高效率
4. 雙向鍊錶：使用上下文導航
5. 堆疊：具有不可變行為的撤消/重做功能
6. 佇列：管理順序 API 呼叫
7. 樹：渲染遞歸元件
8. 圖表：建立複雜的資料關係和導航
9. 結論

相關閱讀：

從 SDE1 到 SDE2，甚至更遠！ ？實際需要什麼。

Jayant Bhawal 中介軟體 ・ 6 月 10 日

＃職業 ＃晉升 #webdev #初學者

1. 數組？ ：狀態管理的首選

React 中數組無所不在。如果您需要協助了解 .map() 或 .filter() 的工作原理，您可能會太早看到這篇文章了！但不用擔心，一旦您熟悉了這些陣列方法，您就會發現它們對於渲染清單、管理元件狀態和轉換資料是多麼重要。

2. 物件和哈希映射？ ️：規範化資料儲存以提高效率

在 React 應用程式中，當您處理大量實體（例如使用者或貼文）時，將資料規範化為物件（雜湊圖）可以使讀取和更新更加有效率。您無需使用深層嵌套結構，而是透過 ID 來映射實體。

範例：從有ID的規範化儲存讀取

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 (
    <div>
      {postIds.map(id => (
        <post key="{id}" post="{postsById[id]}"></post>
      ))}
    </div>
  );
}

function Post({ post }) {
  return (
    <div>
      <h2 id="post-title">{post.title}</h2>
      <p>{post.content}</p>
    </div>
  );
}

這種模式可以實現高效的資料訪問，特別是對於需要快速更新或讀取而無需重新渲染整個集合的大型資料集。

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 (
    <div>
      {currentNode.prev && (
        <img src="%7BcurrentNode.prev.value.src%7D" alt="{currentNode.prev.value.alt}" classname="prev-image">
      )}
      <img src="%7BcurrentNode.value.src%7D" alt="{currentNode.value.alt}" classname="main-image">
      {currentNode.next && (
        <img src="%7BcurrentNode.next.value.src%7D" alt="{currentNode.next.value.alt}" classname="next-image">
      )}
      <div>
        <button onclick="{()"> setCurrentNode(currentNode.prev)} disabled={!currentNode.prev}>
          Previous
        </button>
        <button onclick="{()"> setCurrentNode(currentNode.next)} disabled={!currentNode.next}>
          Next
        </button>
      </div>
    </div>
  );
}

在此 React 元件中：

• 目前節點儲存在狀態中，並且UI會根據是否有上一個或下一個節點進行更新。
• 這些按鈕使用戶能夠向前和向後導航列表，如果沒有更多節點可移動到，則停用。
• 此結構使用周圍元素的上下文來模擬即時導航，通常用於輪播、媒體庫或播放清單等 UI 元件中。

4. Stacks ?：具有不可變行為的撤銷/重做功能

堆疊允許您使用後進先出 (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) 方式運行，非常適合確保 API 呼叫或通知等任務按正確的順序處理。

範例：排隊 API 呼叫

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 (
    <div>
      <p>{comment.text}</p>
      {comment.children?.map(child => (
        <div style="{{" paddingleft: key="{child.id}">
          <comment comment="{child}"></comment>
        </div>
      ))}
    </div>
  );
}

另一個可能與您相關的熱門貼文：

少寫，永不修復：高度可靠程式碼的藝術

中間件 Dhruv Agarwal ・ 6 月 17 日

#開發者 ＃生產率 #程式設計 ＃職業

7. Graphs ?: Building Complex Data Relationships and Navigation

Example 1: Routing between multiple views
You can represent routes between pages as a graph, ensuring flexible navigation paths in an 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}`);
  }
}

Example 2: User relationship modeling
Graphs are perfect for modeling social connections or any kind of relationship where multiple entities are interconnected.

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

Note: We use graphs to show reviewer dependencies in Middleware.

TL;DR — Those School Lessons Pay Off

Those DSA classes might have felt abstract back in the day, but data structures are powering the world around you in React.

Objects, stacks, queues, linked lists, trees, and graphs are more than just theory — they’re the backbone of the clean, efficient, and scalable apps you build every day.

So the next time you manage state in a queue or handle complex UI logic, remember: you’ve been training for this since school. ?

Let me know which data structures you’ve been using the most!

以上是前端開發 + 資料結構與演算法：DSA 如何為您的 React 應用程式提供動力 ⚡的詳細內容。更多資訊請關注PHP中文網其他相關文章！