专注于前端的面试通常根本不关心 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 (
    

      {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
        
      
    
  );
}

在此 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 (
    

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

          
        
      ))}
    
  );
}

另一篇可能与您相关的热门帖子：

少写，永不修复：高度可靠代码的艺术

中间件 Dhruv Agarwal ・ 6 月 17 日

#开发者 ＃生产率 ＃编程 ＃职业

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 世界提供动力。

对象、堆栈、队列、链表、树和图不仅仅是理论——它们是您每天构建的干净、高效和可扩展应用程序的支柱。

因此，下次您管理队列中的状态或处理复杂的 UI 逻辑时，请记住：您从学校起就一直在接受这方面的培训。 ？

让我知道您最常使用哪些数据结构！