整理好话术的八股文 -- React篇

156 阅读5分钟

1. 讲一讲React的渲染流程

React的渲染流程主要分为两个阶段,一个render阶段,一个commit阶段。 render阶段是生成虚拟DOM的阶段,commit的作用是渲染UI。 如果再划分的详细一下,可以分为三个主要函数,render阶段的调度器Scheduler和协调器Reconciler和commit阶段的Renderer。 调度器Scheduler是用来调度任务的,根据任务的优先级,判断哪个任务进入协调器Reconciler中。 协调器Reconciler函数会生成新的Fiber对象,diff算法就是发生在这个阶段,并在这个过程中收集副作用,收集要修改的DOM元素。最后commit阶段的Renderer函数负责对上阶段收集的DOM元素进行执行真实的DOM操作,并执行副作用。

详解:聊聊React(2) - 渲染流程

2. 讲一讲React的diff算法

React的diff算法发生在协调器Reconciler阶段,这个阶段是要生成新的Fiber Tree, diff算法的目标是最小的代价比较新旧DOM的差别,从而决定要更新那些DOM。React的虚拟DOM使用了双缓冲,也就是两颗虚拟DOM共存的状态,diff算法是通过将JSX和current Fiber Tree 进行比较,然后生成WorkInProgress Fiber Tree,这个过程的核心就是如何提高效率,也就是如何能更好的复用。同时引入key也是优化了diff算法,当同层进行diff的时候,如果仅仅是做了交换,如果没有key的引入,当逐个比较的时候,会先销毁再创建,但是有了key的引入,就会可以查找到相同的DOM直接拿来复用,这样避免了销毁和重建的过程。

详解:面试官又问我 React 中的 Diff 算法

3. 讲一讲useEffect

useEffect可以传入两个参数,第一个是回调函数,第二个是一个数组,表示依赖项。当依赖项为空的时候,会在组件初始化的时候执行一次。当数组不为空的时候,数组中的依赖项发生变化之后,会执行第一个回调函数。

回调函数中可以return返回一个函数,这个函数会在组件被卸载的时候执行。

4. useCallback和useMemo的场景和用法。

useCallbackuseMemo 都是 React 的性能优化工具,主要用于避免不必要的重新渲染或重新计算。useCallback 用于缓存一个函数,只有在其依赖项发生变化时才会重新生成,而 useMemo 用于缓存一个计算结果,只有在其依赖项变化时才会重新计算。这两者的共同点是避免了每次渲染时都创建新的函数或重新计算值,从而减少了组件的性能开销。通常,useCallback 用于传递给子组件的回调函数,而 useMemo 用于复杂计算的缓存,比如在渲染过程中需要多次计算某个值但计算代价较高时,可以用 useMemo 来缓存计算结果,避免每次渲染时都进行计算。使用这两个 Hook 可以在性能瓶颈较大的应用中提高渲染效率,但也要谨慎使用,避免过度优化,一般是配合memo子组件缓存配合使用,其他情况下没有任何意义。

详解:不要再代码中滥用 useCallback 和useMemo

5. 为什么不能在循环中使用hook。

react中Hook是通过链表存储的,在函数组件开始执行的时候,会依次执行hook,当组件再次更新的时候,会重新从第一个hook开始执行,这时候会重新去访问这个hook的前一个状态,如果在循环或者嵌套中使用了hook,可能会导致链表断裂,导致更新阶段在访问前一次状态时就会报错。

6. 讲一讲你了解的Fiber

首先Fiber是一种架构模式,React在v16之前使用的是Stack架构,这种架构是使用递归的方式操作虚拟DOM。这种结构的问题是,一但开始执行递归操作,则不能停止,如果项目足够庞大,则会长时间占用主线程,如果这时候有任务,则会等待,就会可能造成卡顿。Fiber架构就是为了解决这个问题,支持任务的中断和恢复。

其次Fiber是React描述虚拟DOM的一个js对象。使用Fiber节点用链表的形式构建了整颗DOM树。

最后Fiber也可以是指最小的结构单元Fiber节点,这样就可以让整颗DOM树的更新变得可以中断。

详解:面试官又问我是否深入了解过 React Fiber?

7. 讲一讲React的并发模式

React将页面的各种任务分了优先级,并引入了时间切片的概念,给每个任务分配时间,如果执行的时间过长则会让出主线程,再次从任务队列中取出任务执行。在执行的过程中如果有高优先级的任务需要执行,则会使用messageChannel包装成异步任务,进入队列,下次任务执行的时候,会进行判断任务的优先级,先进行执行高优先级的任务。

详解:面试官又问我是否了解 React 并发模式??

8. 讲一讲React 的虚拟DOM

虚拟DOM是用来描述当前页面结构的一个JS对象。之所以使用虚拟DOM是因为首先操作js对象比直接操作DOM对象要更快,其次当页面状态变化引发更新的时候,虚拟DOM只需要更新必要的节点然后再去更新改变的DOM结构,如果直接操作DOM会将整个DOM树重新销毁再重建,,最后虚拟DOM还可以将当前的页面进行抽象,在不同的宿主环境使用不同的API进行解析,实现跨端的需求。

详解:面试官又问我是否了解虚拟DOM?