1、虚拟 DOM 和真实 DOM 的区别？
答：虚拟DOM是 React 等框架使用的一种轻量级 JavaScript 对象，它是对真实DOM的一种抽象表示。它用于优化 DOM 操作，减少真实 DOM 更新次数，达到优化的目的。
- 本质：虚拟DOM是JS对象，真实DOM是浏览器中的DOM节点；
- 操作方式：虚拟 DOM 是先在内存中更新，在映射到真实 DOM；真实 DOM 是直接操作DOM；
- 更新效率：虚拟 DOM 高效：批量 diff + 最小更新；真实 DOM 慢：每次都直接修改页面结构；
- 性能优化：虚拟 DOM 通过 diff 算法、批量更新；真实 DOM 无内置优化，频繁操作性能差；
- 使用方式：虚拟 DOM 通过框架（如 React）使用；真实 DOM 原生 JavaScript / DOM API；
- 渲染位置：虚拟 DOM 内存中；真实 DOM 浏览器中真实渲染树；
- 可控性：虚拟 DOM 不直接操作浏览器结构，更可控；真实DOM操作精细但容易出错和复杂；
2、React 的 Diff 算法是如何工作的？
答：React的Diff算法用于比较前后两棵虚拟 DOM 树的差异，进而计算出最小的更新操作。React通过一套启发式的优化规则，将时间复杂度从 O(n³) 降低到了 O(n)。
核心思想：React不会逐个比较整个树的每个节点，而是使用以下三大假设来快速找出差异：
- 同级比较（Tree Diff）：
- 只会比较同一层级的节点，不会跨层比较。
- 如果节点的类型不同，直接销毁旧节点，创建新节点，不做进一步比较。
- 类型相同 → 比较 props（Component Diff）
- 如果类型一样（如
<div> → <div>），则进一步比较属性（props）和子节点。 - 如果是组件（函数/类组件），则调用组件自身的
shouldComponentUpdate和React.memo等判断。
- 如果类型一样（如
- 子节点 diff：按 key 优化（Element Diff）
- 如果子节点是列表，React 会根据
key来判断哪些节点是移动、复用还是新增。 - 没有 key 时，默认按 index 来 diff，但可能会导致性能差、状态错乱。
- 如果子节点是列表，React 会根据
扩展：React Fiber 与 Diff 的关系
答：React Fiber是 React16 引入的新的协调引擎，它是对React Diff过程的重新实现，使得 Virtual DOM 的 Diff 算法能够异步、可中断、可恢复、优先级调度，解决了旧版 React 同步渲染的性能瓶颈问题。
- 传统 Diff 存在的问题（React 15 及之前），在 React 15 之前，整个 Virtual DOM 的更新和 Diff 是同步的、不可中断的：
- 一旦开始更新，就必须一次性完成整个更新任务。
- 对于大组件树，或者动画/高频输入场景，容易造成：主线程卡顿、页面掉帧、响应迟缓。
- React Fiber 解决的问题，Fiber 是 React 16 开始底层的核心架构，用于实现可中断渲染的 Diff 流程。
- 可中断：渲染过程可被打断，浏览器有空时再继续（异步调度）
- 可恢复：渲染中断后可从上次中断处继续（不是重新来）
- 可分段：渲染可以拆分成多个小任务，逐个执行
- 支持优先级：高优先级更新（如输入、动画）可以插队先执行
- Fiber 是 Diff 过程的执行载体和调度器。 Fiber 把整个 Diff 渲染过程拆分为多个「Fiber 节点」，每个节点代表一个组件/元素，React 通过遍历这些节点来执行更新流程。
- React 可以在每个更新步骤后“暂停”→ 交还控制权给浏览器
- 等浏览器空闲时（通过 requestIdleCallback 或更高级的调度器），再继续处理剩余的更新
- 整个 Diff 流程就变得「更流畅、更智能」
3、什么是并发模式（Concurrent Mode）
答：并发模式（Concurrent Mode）是 React 引入的一种新渲染机制，它允许 React将渲染任务拆分为多个小任务，并在多个帧中异步执行，从而提升大型应用的相应速度和用户体验。Concurrent Mode 不是并行（parallel），而是一种可中断 + 可恢复 + 优先级调度的异步渲染机制。
- 可中断：渲染过程中可以被打断，避免阻塞主线程
- 可恢复：渲染可以从中断的地方继续，不必重头来
- 支持优先级：高优先级任务（如用户输入）可以插队
- 异步调度：利用浏览器空闲时间做低优先级任务
Concurrent Mode 是在React Fiber 架构的基础上实现的，通过将每次渲染拆成小单元（Fiber Node），配合调度器（Scheduler）进行异步调度。关键机制：每次渲染只处理一小部分 DOM 更新，避免长任务卡住主线程。
4、React 的状态提升是什么？
答：状态提升（State Lifting）是指当多个子组件需要共享某个 state 时，React 推荐将这个 state 提升到它们的最近共同父组件中，由父组件来维护状态，并通过 props 将状态和更新函数传递给子组件。React 的数据流是单向的（由上到下）。缺点：父组件逻辑变复杂，状态集中导致可读性下降
