以前端為中心的面試通常根本不關心 DSA。
對於我們這些記得在學校/大學學習過DSA 的人來說，所有的例子都感覺純粹是演算法（有充分的理由），但幾乎沒有任何例子或指導來說明我們每天使用的產品如何利用這個概念。
「我需要這個嗎？」
你已經問過很多次這個問題了，不是嗎？ ？
以下是您今天可以在 React 應用程式中利用的一些資料結構！ ？
相關閱讀：
React 中數組無所不在。如果您需要協助了解 .map() 或 .filter() 的工作原理，您可能會太早看到這篇文章了！但不用擔心，一旦您熟悉了這些陣列方法，您就會發現它們對於渲染清單、管理元件狀態和轉換資料是多麼重要。
在 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]} />
))}
</div>
);
}
function Post({ post }) {
return (
<div>
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
);
}
這種模式可以實現高效的資料訪問，特別是對於需要快速更新或讀取而無需重新渲染整個集合的大型資料集。
當您需要上一個和下一個元素的上下文時，雙向鍊錶非常有用- 想像一下導航照片庫，其中每個圖像都顯示其相鄰圖像以供參考。我們不使用索引，而是直接將目前節點儲存在元件狀態中。
範例：用於在具有上下文的元素之間導航的雙向鍊錶
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={currentNode.prev.value.src} alt={currentNode.prev.value.alt} className="prev-image" />
)}
<img src={currentNode.value.src} alt={currentNode.value.alt} className="main-image" />
{currentNode.next && (
<img src={currentNode.next.value.src} 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 元件中：
堆疊允許您使用後進先出 (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);
}
};
佇列以先進先出 (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
}
};
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: '20px' }} key={child.id}>
<Comment comment={child} />
</div>
))}
</div>
);
}
另一個可能與您相關的熱門貼文：
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.
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中文網其他相關文章！
