八股文总结 | bhwa233 Notion Blog

computed内部实现了一个惰性的watcher，在实例化的时候不会去求值，其内部通过dirty属性标记计算属性是否需要重新求值。当computed依赖的任一状态（不一定是return中的）发生变化，都会通知这个惰性watcher，让它把dirty属性设置为true。所以，当再次读取这个计算属性的时候，就会重新去求值。

vue 和 react 在虚拟dom的diff上，做了哪些改进使得速度很快?

react diff算法 | bhwa233 Notion Blog

bhwa233 Blog

https://notion-next-plum-chi.vercel.app/article/0278b8b0-cb35-43de-8f35-04e7238f1dfb

vue 和 react 里的key的作用是什么? 为什么不能用Index？用了会怎样? 如果不加key会怎样?

不用 key：

就地复用节点。在比较新旧两个节点是否是同一个节点的过程中会判断成新旧两个节点是同一个节点，因为 a.key 和 b.key 都是 undefined。所以不会重新创建节点和删除节点，只会在节点的属性层面上进行比较和更新。所以可能在某种程度上（创建和删除节点方面）会有渲染性能上的提升；

无法维持组件的状态。由于就地复用节点的关系，可能在维持组件状态方面会导致不可预知的错误，比如无法维持改组件的动画效果、开关等状态；

也有可能会带来性能下降。因为是直接就地复用节点，如果修改的组件，需要复用的很多节点，顺序又和原来的完全不同的话，那么创建和删除的节点数量就会比带 key 的时候增加很多，性能就会有所下降；

用 key：

维持组件的状态，保证组件的复用。因为有 key 唯一标识了组件，不会在每次比较新旧两个节点是否是同一个节点的时候直接判断为同一个节点，而是会继续在接下来的节点中找到 key 相同的节点去比较，能找到相同的 key 的话就复用节点，不能找到的话就增加或者删除节点。

查找性能上的提升。有 key 的时候，会生成 hash，这样在查找的时候就是 hash 查找了，基本上就是 O(1) 的复杂度。

节点复用带来的性能提升。因为有 key 唯一标识了组件，所以会尽可能多的对组件进行复用（尽管组件顺序不同），那么创建和删除节点数量就会变少，这方面的消耗就会下降，带来性能的提升。

vue 的keep-alive的作用是什么？怎么实现的？如何刷新的?

Vue.js 神器之一：深入理解 keep-alive 的作用、实现及刷新方法 - 掘金

Vue 的 `keep-alive` 组件是用来缓存有状态组件的，可以将组件缓存起来并在需要时重新使用，而不是每次重新创建。这可以提高应用的性能和用户体验，特别是在需要频繁切换组件时。

https://juejin.cn/post/7221037881183535163

vue 是怎么解析template的? template会变成什么?

Vue.js在解析模板时，采用了以下步骤：

解析：Vue.js使用解析器将模板字符串转换为抽象语法树（AST）。

优化：Vue.js会对AST进行优化，找出静态内容（Static Content）和动态内容（Dynamic Content）。

静态内容是指在渲染过程中不会改变的部分，如纯文本。

动态内容是指依赖于响应式数据的部分，需要在每次数据变化时重新计算。

在解析和优化之后，模板会转换为一个渲染函数（Render Function）。渲染函数是一个JavaScript函数，它接收一个上下文对象作为参数，并返回一个虚拟DOM（VNode）树。

渲染函数的作用是根据数据的变化生成新的虚拟DOM树，并将其与旧的虚拟DOM树进行对比，找出需要更新的部分，然后将更新应用到实际的DOM上，以实现视图的更新。

总结起来，Vue.js通过解析器将模板转换为优化

后的渲染函数，渲染函数根据数据的变化生成虚拟DOM树，并将其与旧的虚拟DOM树进行对比和更新，最终映射到实际的DOM上完成视图的渲染。

JSX的本质是什么

JSX就是一个语法糖，全称JavaScript XML，是react定义的一种类似于XML的JS扩展语法，用来创建虚拟DOM。

react fiber

fiber意思是纤程，是一种数据结构或者执行单元。

react的渲染分为commit和render两个阶段，在react 16之前，render阶段是采用递归比较新旧两个虚拟dom树，找出需要更新的节点，这个过程是同步不可打断的，因为递归导致执行栈越来越深，如果打断就不可恢复。如果虚拟dom树比较复杂，则diff过程会一直占用js线程，导致界面卡顿，无法响应。

为了解决这个问题，react 16 使用了时间切片的思想，引入了新的react fiber架构，使得render阶段变为异步可打断的。通过先将虚拟dom树的每个节点转为fiber数据结构，并以链表的形式连接。然后根据链表顺序执行每个fiber，fiber本身也作为一个任务单元，每完成一个fiber任务后，会先判断是否有新的高优先级任务或着判断当前帧中是否还有剩余时间，如果没有时间则会把控制权交给浏览器，把剩余的fiber任务推到下一个帧中进行，这样避免一直占用js线程。当打断时会保存当前fiber索引，下次执行可以快速恢复。

fiber数据结构有很多种类，首先是作为任务单元，具备return、child、sibing属性作为遍历指针。作为静态的数据结构，该组件的类型（函数组件/类组件/原生组件等，statenode保存组件的真实dom引用。作为组件，保存了memorizedState，保存函数组件中的上一次渲染的hooks状态。作为动态的工作单元，保存了该组件本次更新中该组件改变的状态、要执行的工作。

Fiber

React fiber 是如何实现时间切片的？

关键词：react16 架构、react Reconciler、fiber 时间切片、fiber 时间、react 协调器基本原理本质上来说就是将渲染任务拆分成多个小任务...

https://www.jianshu.com/p/2b70ba8ffcf0

react层面的性能优化

使用 React.memo 来实现浅比较，避免不必要的组件重新渲染。

在列表中使用键（Keys）：

在渲染列表时，为每个列表项提供唯一的键（key）。

使用稳定的标识符作为键，避免将索引作为键，以确保正确的组件重用和更新。

使用虚拟滚动和分页：

对于大型列表或数据集，考虑使用虚拟化技术，如 react-virtualized 或 react-window，以减少渲染和内存消耗。

如果可能，将数据进行分页加载，只渲染当前可见的部分数据。

使用 React.lazy 和 Suspense 实现按需加载组件：

对于较大的组件或路由页面，可以使用 React.lazy 和 Suspense 实现按需加载，即在需要时才进行组件加载，而不是在应用启动时一次性加载所有组件。这样可以提高应用程序的性能和加载速度。

使用 useCallback 和 useMemo：

使用 useCallback 缓存回调函数，避免不必要的函数重新创建。避免作为props，导致子组件重新渲染。

使用 useMemo 缓存计算结果，避免不必要的重复计算。

避免在渲染期间执行副作用：

尽量避免在渲染期间执行昂贵的副作用操作，如网络请求或计算密集型任务。

使用 useEffect 的依赖项数组，确保副作用只在特定依赖项变化时执行。

开启SSR（服务端渲染）

当面试官问你在使用React开发做过哪些优化时，你可以这么回答 - 掘金

1、使用 React.memo() React.memo 是 React 提供的一个高阶组件（Higher Order Component），用于优化函数组件的性能。它可以帮助避免不必要的重新渲染，从

https://juejin.cn/post/7273427487588925501

useEffect 与 useLayoutEffect 的区别

useEffect 和 useLayoutEffect 都是 React 中的 Hook，用于在函数组件中执行副作用操作。它们之间的主要区别在于它们的调用时机。

useEffect

useEffect 它在组件渲染完成后异步执行的函数。

副作用函数会在浏览器绘制完成后才会执行，因此它不会阻塞页面的更新。

适合大多数副作用操作，比如数据获取、订阅事件、定时器等。

useLayoutEffect

useLayoutEffect 是同步执行的，它会在组件渲染完成后立即调用副作用函数。

副作用函数会在浏览器绘制之前执行，因此它可能会阻塞页面的更新。

通常用于需要在 DOM 更新之前执行的副作用操作，比如测量 DOM 元素尺寸、处理布局等。

总结：

如果你的副作用操作不需要同步执行，并且不会影响组件的布局和渲染，可以使用 useEffect。

如果你的副作用操作需要同步执行，并且可能影响组件的布局和渲染，可以使用 useLayoutEffect。

useCallback与useMemo区别

useCallback 缓存的是函数，适用于避免不必要的函数重新创建。

useMemo 缓存的是函数的返回值，适用于避免不必要的计算开销。

redux原理

React 是什么？ | 阿畅的博客

虚拟列表怎么实现?

NotionNext BLOG | loading

这是一个由NotionNext生成的站点

https://notion-next-plum-chi.vercel.app/article/680a853c-5852-486b-927e-2be080d55b26

合成事件

React17事件机制 - 掘金

由于React16和React17在事件机制在细节上有较大改动，本文仅对React17的事件机制做讲解，在最后对比React17和React16在事件机制上的不同点。

https://juejin.cn/post/7164582718053810184

先讲了一下React合成事件的优势： 1. 抹平不同浏览器直接的差异，提供统一的API使用体验 2. 通过事件委托的方式统一绑定和分发事件，有利于提升性能，减少内存消耗。

合成事件的绑定及分发流程： 1. React应用启动时，会在页面渲染的根元素上绑定原生的DOM事件，将该根元素作为委托对象 2. 在组件渲染时，会通过JSX解析出元素上绑定的事件，并将这些事件与原生事件进行一一映射 3. 当用户点击页面元素时，事件会冒泡到根元素，之后根元素监听的事件通过dispatchEvent方法进行事件派发 4. dispatchEvent会根据事件的映射关系以及DOM元素找到React中与之对应的fiber节点 5. 找到fiber节点后，将其绑定的合成事件函数加到一个函数执行队列中 6. 最后则依次执行队列中的函数完成事件的触发流程

React的patch流程

React新版架构新增了一个Scheduler调度器主要用于调度Fiber节点的生成和更新任务

当组件更新时，Reconciler协调器执行组件的render方法生成一个Fiber节点之后再递归的去生成Fiber节点的子节点

每一个Fiber节点的生成都是一个单独的任务，会以回调的形式交给Scheduler进行调度处理，在Scheduler里会根据任务的优先级去执行任务

Scheduler按照优先级执行任务时，会异步的执行，同时每一个任务执行完成之后，都会通过requestIdleCallBack去判断下一个任务是否能在当前渲染帧的剩余时间内完成

如果不能完成就发生中断，把线程的控制权交给浏览器，剩下的任务则在下一个渲染帧内执行

整个Reconciler和Scheduler的任务执行完成之后，会生成一个新的workInProgressFiber的新的节点树，之后Reconciler触发Commit阶段通知Render渲染器去进行diff操作，也就是我们说的patch流程

使用setCount修改数据后，到页面重新渲染，整个流程是怎么样的

初始化状态：使用useState定义一个状态变量和对应的更新函数。例如：const [count, setCount] = useState(0);

执行 setCount(count + 1) 后，到页面重新渲染的整个流程如下：

1）当你调用 setCount(count + 1)，React会记录这个更新操作，并将新的值（count + 1）存储在内部。

2）React会将组件标记为“脏”（dirty），表示需要重新渲染。

3）组件函数将被再次执行，这一次执行过程中会重新计算组件的UI。在这个过程中，count的值被更新为新的值（count + 1），这将反映在生成的UI中。

4）React会将前后两次渲染生成的虚拟DOM树进行比较，找出变化的部分。在这种情况下，count的值发生了变化，因此会更新与count相关的部分。

5）只有变化的部分会被重新渲染，这样可以提高性能。React会将变化的部分转换为实际的DOM操作，更新到页面上。

6）页面更新完成后，用户将看到更新后的页面，其中包含了新的count值的呈现。

总结起来，执行 setCount(count + 1) 后，React会在后续的重新渲染过程中更新组件的UI，使其反映新的状态值。这样，页面就会显示更新后的数据。

react和vue的diff算法

正常的两个树比较复杂度是n2，为了优化性能，react做了一些优化

树diff，只比对同级的dom节点。因为跨层级的节点移动场景很少

组件diff，如果组件类型不一样，则不再进行比对，直接替换新的组件

同一层级的子节点比较，以通过标记 key 的方式进行列表对比。（基于节点进行对比），尽可能的复用节点。

多节点diff更新过程

Diff算法的整体逻辑会经历两轮遍历：

第一轮遍历：处理更新的节点。

第二轮遍历：处理剩下的不属于更新的节点。

面试官：你了解vue的diff算法吗？说说看 | web前端面试 - 面试官系列

面试官：说说React diff的原理是什么？ | web前端面试 - 面试官系列

react16和react17的区别？

1、React16中JSX会转换为“React.createElement”，而react17不会---(新的JSX转换)；

2、React17不再在后台的文档级别附加事件处理程序，而React16会---(事件代理更改)；

3、React16中有事件池，React17去除了事件池。

React17 与React16 变化哪些 - 掘金

新的JSX转换 React 16原理 React 17原理总结事件代理更改在React 17中，React将不再在后台的文档级别附加事件处理程序。取而代之的是，它将它们附加到渲染您的React树

https://juejin.cn/post/6992418478749646885

一文解读 React 17 与 React 18 的更新变化 - 掘金

在开发者角度，绝大部分写业务代码一般感知不到 React17 与 React18 的大变化，但也要详细了解清楚具体更新了什么。本文就来一次性梳理下 react17与react18的变化

https://juejin.cn/post/7157888552229928996

react事件机制

React17事件机制 - 掘金

由于React16和React17在事件机制在细节上有较大改动，本文仅对React17的事件机制做讲解，在最后对比React17和React16在事件机制上的不同点。

https://juejin.cn/post/7164582718053810184#heading-18

class组件和函数组件的区别

类组件的缺点 :

大型组件很难拆分和重构，也很难测试。

业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。

组件类引入了复杂的编程模式，比如 render props 和高阶组件。

难以理解的 class，理解 JavaScript 中 this 的工作方式。

区别：

性能

函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。

状态 hooks出现之前，函数组件没有实例，没有生命周期，没有state，没有this，所以我们称函数组件为无状态组件。 hooks出现之前，react中的函数组件通常只考虑负责UI的渲染，没有自身的状态没有业务逻辑代码，是一个纯函数。它的输出只由参数props决定，不受其他任何因素影响。