以下是React面试常考内容的系统梳理,从宏观设计思想到微观实现细节,涵盖高频考点及底层原理:
一、宏观层面:React设计哲学与架构
-
核心设计理念
• 声明式编程:通过描述UI的最终状态而非操作步骤实现高效开发(如JSX声明结构)
• 组件化思想:高内聚低耦合的组件构建模式,支持组合式开发与状态隔离
• 跨平台能力:基于虚拟DOM的抽象层,通过React Native实现“Learn Once, Write Anywhere” -
架构演进
• Stack Reconciler(旧架构):递归不可中断的同步渲染,存在主线程阻塞问题
• Fiber架构(新核心):链表结构实现任务分片、优先级调度与可恢复渲染,支撑并发模式(React 18+)
• 双缓存机制:内存中构建workInProgress树,保证更新连续性 -
生态定位
• 与Vue对比:React强调单向数据流与显式状态管理,Vue偏向响应式数据绑定
• 技术选型场景:适合大型应用的可预测性需求,依赖社区生态扩展功能(如路由、状态管理)
二、中观层面:核心机制与开发实践
-
组件模型
• 函数组件 vs 类组件:Hooks的引入消除生命周期复杂度,函数组件更易优化
• 受控组件与非受控组件:表单数据由React状态控制 vs DOM原生管理
• 高阶组件(HOC)与Render Props:逻辑复用模式对比 -
状态管理
• useState原理:基于闭包与链表结构实现状态隔离,依赖调用顺序
• Redux核心流程:单向数据流(Action → Reducer → Store → View)
• Context API优化:结合useMemo避免非必要渲染 -
性能优化
• 虚拟DOM Diff策略:同层比较、Key优化、组件类型判断
• 渲染控制:React.memo
缓存组件、useMemo/useCallback
减少计算
• 长列表处理:虚拟滚动(如react-window)与分页加载
三、微观层面:底层原理与细节实现
-
核心API实现
•