数据结构与算法在前端领域的应用

这是一个我即将做的一个《数据结构与算法在前端领域的应用》主题演讲的一个前菜。希望通过这个分享让大家认识到其实前端领域也有很多算法的，从而加深前端同学对算法的认识。如果大家对数据结构和算法感兴趣，欢迎关注我的个人公众号，或者入群和我交流，二维码在文章末尾。

关于我

我是一个对技术充满兴趣的程序员, 擅长前端工程化，前端性能优化，前端标准化等。

做过.net， 搞过Java，现在是一名前端工程师。

除了我的本职工作外，我会在开源社区进行一些输出和分享，GitHub 共计获得1.5W star。比较受欢迎的项目有leetcode题解 , 宇宙最强的前端面试指南 和我的第一本小书

为什么大家觉得算法没用

在我的职业生涯中，碰到很多非算法岗的研发同学吐槽“算法在实际业务中没什么用”， 甚至在面试官也问过我这个问题。我们姑且不来判断这句话正确与否，我们先来看下为什么大家会有这样的想法。

我发现很多人喜欢用冰山这个图来表示这种只看到总体的一小部分的情况。我也来借用一下这个创意。

根据我的经验，我们写的业务代码通常不到总包体的 5%， 下面是我以前做过的一个实际项目的代码分布。

 $ du -sh node_modules # 429M	
 $ du -sh src # 7.7M

大家可以拿自己的实际项目看一下，看是不是这样的。

其实不难看出业务代码在整个应用的比例是很小的，软件工程有一个至理名言，“软件开发的 90%的工作是由 10%的人完成的”， 这句话很对，那么剩下的 10 的工作却由剩下的 90%来完成。

因此我们感觉算法没用，是因为我们没用深入剩下的“90%” 很多场景我们接触不到，并且没有思考过，就很容易“井底之蛙”，到头来就变成“只会用别人造好的轮子组装代码”的“前端打字员”。

那剩下的 90% 究竟有哪些涉及到算法呢？是否可以举例说明呢？那接下来让我们来继续看一下。

前端中算法的应用场景都有哪些

说实话，这部分内容实在太多啦，为了让大家有一个直观的感受，我画了一个图。

图中黄色的代表我自己实现过。

这些都是前端开发过程的一些东西， 他们多多少少涉及到了数据结构和算法的知识

下面我们来简单分析一下。

VDOM

事实上 VDOM 就是一种数据结构，但是它并不是我们在《数据结构与算法》课程中学习到的一些现成的数据结构。

逻辑上 VDOM 就是用来抽象 DOM 的，底层上 VDOM 普遍实现是基于 hash table 这种数据结构的。

一个典型的 VDOM 可以是：

{	
  type: 'div',	
  props: {	
    name: 'lucifer'	
  },	
  children: [{	
    type: 'span',	
    props: {},	
    children: []	
  }]	
}

不难看出，VDOM 是一种递归的数据结构，因此使用递归的方式来处理是非常直观和容易的。

我上面提到了 VDOM 是 DOM 的抽象（ye, a new level of abstraction）。根据 VDOM 我们可以创建一个对应的真实 DOM。

如果我们只是做了这一层抽象的话，我们相当于引入了一种编程模式，即从 面向 DOM 编程，切换到面向 VDOM 编程，而现在 VDOM 又是由数据驱动的，因此 我们的编程模式切换到了“数据驱动”。

事实上，VDOM 部分还有一个 VDOM diff 算法，相信大家都听说过。关于 DOM diff 的算法，以及它是如何取舍和创新的，我之前在一个地方回答过，这里给一个链接地址: https://juejin.im/post/5d3d8cf15188256ac355a9f0

Hooks

Hooks 是 React16 添加的一个新功能， 它要解决的问题是状态逻辑复用。

Hooks 逻辑上解决了纯函数无法持久化状态的“问题”，从而拓宽了纯函数组件的 适用范围。

底层上 Hooks 使用数