关于前端:前端面试系列三前端框架

快来退出咱们吧！

“ 小和山的菜鸟们 ”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (https://xhs-rookies.com/) 进行学习，及时获取最新文章。

“Code tailor”，如果您对咱们文章感兴趣、或是想提一些倡议，微信关注 “小和山的菜鸟们” 公众号，与咱们取的分割，您也能够在微信上观看咱们的文章。每一个倡议或是同意都是对咱们极大的激励！

面试系列不定期更新，请随时关注

前言

本篇专栏重点在于解说面试中 框架（react、vue） 的面试题内容。

留神： 本篇专栏至只会波及到重点内容，并不会进行拓展。某些题目须要拓展知识点的，咱们会将拓展内容、整体详细信息搁置与每个题目的最后面，能够自行查看。

框架（react、vue）

题目解析

虚构 DOM

Virtual DOM 是一种编程概念。在这个概念里，UI 以一种理想化的，或者说“虚构的”表现形式被保留于内存中，并通过如 ReactDOM 等类库使之与“实在的”DOM 同步。

当你在渲染一个 div 时，其实例属性可多达 298 个（Chrome 下，每个浏览器实现不同），没有 VIrtual DOM，咱们每次进行视图更新时，将旧 dom 元素移除，挂载新 dom 元素，这会导致咱们耗费大量的内存和 CPU 资源。而 VIrtual dom 的存在则是为了帮忙咱们只针对批改的局部进行渲染，这也同样使得咱们能够从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。

VIrtual DOM 具体表现形式，其实就是通过 JavaScript 来形容 DOM 构造，实质即通过 JavaScript 做了一层 DOM 映射

更多请见 Virtual DOM 概念

具体映射形式请查看 Virtual DOM 映射形式

diff 算法

在某一时间节点调用 React 的 render() 办法，会创立一棵由 React 元素组成的树。在下一次 state 或 props 更新时，雷同的 render() 办法会返回一棵不同的树。React 须要基于这两棵树之间的差异来判断如何高效的更新 UI，以保障以后 UI 与最新的树放弃同步。

此算法有一些通用的解决方案，即生成将一棵树转换成另一棵树的最小操作次数。然而，即便应用最优的算法，该算法的复杂程度仍为 O(n3)，其中 n 是树中元素的数量。

如果在 React 中应用该算法，那么展现 1000 个元素则须要 10 亿次的比拟。这个开销切实是太过昂扬。于是 React 在以下两个假如的根底之上提出了一套 O(n) 的启发式算法：

1. 两个不同类型的元素会产生出不同的树；
2. 开发者能够通过设置 key 属性，来告知渲染哪些子元素在不同的渲染下能够保留不变；

正是基于此设计概念，所以 React diff 算法只对同层进行比拟，故将复杂度升高到 O(n) 而其体现模式即如下：

• 比照不同类型的元素（当根节点为不同类型的元素时，React 会装配原有的树并且建设起新的树）
• 比照同一类型的元素（仅比照更新有扭转的属性）
• 比照同一类型的组件元素（组件实例会放弃不变，因而能够在不同的渲染时放弃 state 统一）
• 对子节点进行递归（默认状况下，React 会同时遍历两个子元素的列表；当产生差别时，生成一个 mutation）

对子节点的递归波及到咱们为什么要为子元素设置 key？即帮忙 React 应用 key 来匹配原有树上的子元素以及最新树上的子元素。至于为什么不必下标作为 key，我想读者加以思考便会晓得

因为 React 依赖启发式算法，因而当以下假如没有失去满足，性能会有所损耗。

1. 该算法不会尝试匹配不同组件类型的子树。如果你发现你在两种不同类型的组件中切换，但输入十分类似的内容，倡议把它们改成同一类型。在实践中，咱们没有遇到这类问题。
2. Key 应该具备稳固，可预测，以及列表内惟一的特质。不稳固的 key（比方通过 Math.random() 生成的）会导致许多组件实例和 DOM 节点被不必要地从新创立，这可能导致性能降落和子组件中的状态失落。

更多设计思维与实现细节请查看 协调 Diff 算法

react 罕用的生命周期及其执行程序

挂载

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount

更新

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

卸载

• componentWillUnmount

钩子函数具体应用阐明请返回 React.Component

react redux

首先要明确 redux 是 JavaScript 应用程序的可预测状态管理工具，其自身与 react 无关，react – redux 将它们两分割起来的

而学习 react redux 需先明确 redux 的工作原理。Redux 是一个经典的 公布订阅器 ， 它帮咱们用一个变量存储所有的 State，并且提供了公布性能来批改数据，以及订阅性能来触发回调（然而回调之后干嘛？本人解决）。

1. 首先明确与 React 产生关联的是 React-Redux 这个库
2. Redux 的原理就是一个 公布订阅器，帮咱们用一个变量存储所有的 State，并且提供了公布性能来批改数据，以及订阅性能来触发回调
3. 而 React-Redux 的作用就是订阅 Store 里数据的更新，他蕴含两个重要元素，Provider 和 connect 办法
4. Provider 的作用就是通过 Context API 把 Store 对象注入到 React 组件下来
5. 而 connect 办法就是一个高阶组件，在高阶组件里通过订阅 Store 中数据的更新，从而通过调用 setState 办法来触发组件更新

更多应用请见：redux

react hooks

它能够让你在不编写 class 的状况下应用 state 以及其余的 React 个性。

• 应用 state
• 状态逻辑复用

它呈现的动机更多的还是说在组件之间复用状态逻辑很难，纵然咱们已有高阶组件，render props 能够去做这样的事件，但二者或多或少多存在一些问题

例如，高阶组件在做逻辑复用时

• 无奈清晰的标识数据的起源
• props 可能会被笼罩

而 render props 则很容易导致

• 嵌套天堂

所以说 react hooks 的呈现更多的是解决了状态逻辑复用的完整性

更多钩子函数请返回 Hooks

react router

react router 冀望在不刷新页面的状况下，依据不同的门路展现不同的组件

react router 的三个外围组件即

• 路由器：BrowserRouter 和 HashRouter
• 路由匹配器：Switch 和 Route
• 路由导航：Link、NavLink 和 Redirect

应用的话大家自行施展就好

react 中类组件和函数组件的区别

在 hooks 进去之前，其实函数组件和类组件的区别在于

而 hook 之后就仁者见仁，智者见智了，举荐看这篇由 react 外围开发者 dan 写的 类组件和函数组件的区别

下节预报

下节咱们将为大家带来 网络及存储 的面试题解，敬请期待！