2024年最新谈谈我这些年对前端框架的理解，2024年最新Web前端工程师面试该怎么准备-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84411822/article/details/138911631

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

这个通过把组件树改成链表，把 vdom 的生成从递归改循环的功能就是 react fiber。

fiber 节点相对于之前的组件节点来说，没有了 parent、children 这种属性，多了 child、sibling、return 属性。

通过 fiber 链表树，优化了渲染的性能。

可以看到 vue 的性能优化和 react 的性能优化是不一样的：

vue 是组件级别的数据监听的方案，问题可能出现在一个属性太多 watcher 的时候，所以优化思路就是大组件拆分成小组件，保证每个属性不要有太多 watcher。

react 不监听、不检查数据变化，每次都渲染生成 vdom，然后进行 vdom 的对比，那么优化的思路就是 shouldComponentUpdate 来跳过部分组件的 render，而且 react 内部也做了组件树的链表化（fiber）来把递归改成可打断的渲染，按照时间片来逐渐生成整个 vdom。

组件之间难免要有逻辑的复用，react 和 vue 有不同的方案：

vue 的组件是 option 对象的方式，那么逻辑复用方式很自然可以想到通过对象属性的 mixin，vue2 的组件内逻辑复用方案就是 mixin，但是 mixin 很难区分混入的属性、方法的来源，比较乱，代码维护性差。但也没有更好的方案。

react 刚开始也是支持 mixin 的，但后来废弃了。

react 的组件是 class 和 function 两种形式，那么类似高阶函数的高阶组件（high order component）的方式就比较自然，也就是组件套组件，在父组件里面执行一部分逻辑，然后渲染子组件。

除了多加一层组件的 HOC 方式以外，没有逻辑的部分可以直接把那部分 jsx 作为 props 传入另一个组件来复用，也就是 render props。

HOC 和 render props 是 react 的 class 组件支持的两种逻辑复用方案。

最开始的 function 组件是没有状态的，只是作为 class 组件渲染的辅助而存在。

但是 HOC 的逻辑复用方式最终导致了组件嵌套太深，而且 class 内部生命周期比较多，逻辑都放在一起导致了组件比较大。

怎么解决 class 组件嵌套深和组件大的问题呢？而且还不能引入破坏性的更新，不然下场可能会很惨。

于是 react 团队就瞅准了 function 组件，能不能在 function 组件里面也支持 state，通过扩展一些 api 的方式来支持，也不是破坏性的更新。

function 组件要支持 state，那 state 存在哪里呢？

class 组件节点有 state，变成 fiber 节点之后依然有，function 组件本来就没有 state，那么 fiber 节点中同样也没有。

那在 function 组件的 fiber 节点中加入 state 不就行了？

于是 react 就在 function 组件的 fiber 节点中加入了 memorizedState 属性用来存储数据，然后在 function 组件里面通过 api 来使用这些数据，这些 api 被叫做 hooks api。

因为是使用 fiber 节点上的数据，就把 api 命名为了 useXxx。

每个 hooks api 都要有自己存放数据的地方，怎么组织呢？有两种方案，一种是 map，一种是数组。

用 map 的话那么要 hooks api 要指定 key，按照 key 来存取 fiber 节点中的数据。

用数组的话顺序不能变，所以 hooks api 不能出现在 if 等逻辑块中，只能在顶层。

为了简化使用， hooks 最终使用了数组的方式。当然，实现起来用的是链表。

每个 hooks api 取对应的 fiber.memoriedState 中的数据来用。

hooks api 可以分为 3 类：

第一类是数据类的：

useState：在 fiber.memoriedState 的对应元素中存放数据
useMemo：在 fiber.memoriedState 的对应元素中存放数据，值是缓存的函数计算的结果，在 state 变化后重新计算值
useCallback：在 fiber.memoriedState 的对应元素中存放数据，值是函数，在 state 变化后重新执行函数，是 useMemo 在值为函数的场景下的简化 api，比如 useCallback(fn, [a,b]) 相当于 useMemo(() => fn, [a, b])
useReducer：在 fiber.memoriedState 的对应元素中存放数据，值为 reducer 返回的结果，可以通过 action 来触发值的变更
useRef：在 fiber.memoriedState 的对应元素中存放数据，值为 {current: 具体值} 的形式，因为对象不变，只是 current 属性变了，所以不会修改。

useState 是存储值最简单的方式，useMemo 是基于 state 执行函数并且缓存结果，相当于 vue 的 getter，useCallback 是一种针对值为函数的情况的简化，useReducer 是通过 action 来触发值的修改。useRef 包了一层对象，每次对比都是同一个，所以可以放一些不变的数据。

不管形式怎么样，这些 hooks 的 api 的作用都是返回值的。

第二类是逻辑类的：