React架构面试题及详细答案.docxVIP

React架构面试题及详细答案

一、基础架构核心题（必问，考察底层理解）

1.请说说React16之后的Fiber架构解决了什么问题？核心原理是什么？

问题解析：重点考察对React架构升级的理解，避免只背概念，要结合实际开发中的痛点（比如长列表渲染卡顿）。

详细答案：在React16之前，使用的是StackReconciliation（栈协调）架构，其核心问题是同步渲染阻塞主线程。因为React的虚拟DOM比对、组件渲染是同步进行的，如果组件层级很深（比如长列表、复杂表单），渲染过程会占用几百毫秒，导致浏览器无法响应用户操作（点击、输入）、渲染动画，出现卡顿。

Fiber架构的核心目的就是解决这个卡顿问题，核心原理是将同步渲染拆分为可中断、可恢复的异步渲染，核心是“时间切片”（TimeSlicing）和“优先级调度”。

具体来说：

1.Fiber本质是一个工作单元（可以理解为一个组件的渲染任务），每个Fiber节点对应一个组件，记录该组件的类型、DOM信息、优先级等；

2.渲染过程被拆分为两个阶段：Reconciliation（协调阶段，也叫调度阶段）和Commit（提交阶段）；

3.协调阶段（可中断、可恢复）：React会遍历所有Fiber节点，进行虚拟DOM比对，确定哪些组件需要更新，这个过程可以被高优先级任务（比如用户输入、动画）中断，等高优先级