FrontEnd Interview

Appearance

001react专题知识大纲 ​

一、深入理解React Fiber算法：从卡顿根源到性能救赎 ​

  • Fiber算法的核心设计目标（解决栈溢出、任务中断与恢复等问题）
  • Fiber的本质（链表结构的工作单元这一数据结构）
  • Fiber树与DOM树的关系（映射与复用）
  • 双缓存机制（current Fiber树与workInProgress Fiber树的切换）
  • 工作循环（Scheduler调度、Reconciliation协调、Commit提交三阶段）
  • 时间切片（Time Slicing）的实现原理（requestIdleCallback模拟）
  • Fiber算法对性能的提升（避免长任务阻塞主线程）

二、React性能优化实战：从卡顿到丝滑的修炼之路 ​

  • 渲染优化（React.memo、useMemo、useCallback的应用；合理拆分组件；列表渲染中key的正确使用等）
  • 状态管理优化（状态粒度拆分；减少状态提升层级）
  • 资源加载优化（代码分割；图片/静态资源懒加载）
  • 计算优化（复杂计算迁移至WebWorker；缓存计算结果）
  • 其他优化手段（虚拟列表；避免在render中创建函数/对象；使用生产环境构建）

三、react使用技巧 ​

  • 组件设计（函数组件与类组件的选择场景；自定义Hooks封装复用逻辑；高阶组件的合理使用与陷阱；组件通信方式选择）
  • Hooks最佳实践（依赖数组的正确设置；避免违反Hooks使用规则；useRef的多场景应用；useState与useReducer的选择）
  • 样式解决方案（CSS Modules避免样式冲突；Styled Components组件化样式；动态样式处理）
  • 错误与边界处理（Error Boundary捕获组件树错误；异步操作错误处理）
  • 调试技巧（React DevTools的使用；日志打印与断点调试）

四、react中如何实现懒加载？懒加载的底层原理是什么？在index.html文件中如何表现？ ​

  • 懒加载的实现方式（路由级懒加载；组件级懒加载；图片懒加载）
  • 底层原理（动态import()的特性；React.lazy的作用；Suspense的功能）
  • 在index.html中的表现（初始HTML包含的主包脚本；懒加载模块的chunk文件；触发懒加载时的脚本加载；加载完成后的DOM更新）

五、react的渲染原理是什么，什么是虚拟DOM，基本使用是如何的？ ​

  • React渲染原理（从JSX到DOM的过程；协调算法；渲染器的作用；批处理更新机制）
  • 虚拟DOM（定义；核心作用；与真实DOM的区别；更新流程）
  • 虚拟DOM的基本使用（JSX语法描述虚拟DOM；createElement函数的手动调用；虚拟DOM的不可变性）

六、react-router的基本使用与实现原理 ​

  • 基本使用（核心组件；路由参数传递；嵌套路由配置；编程式导航；路由守卫）
  • 实现原理（路由模式区别；路由匹配机制；上下文的作用；懒加载路由的实现）

七、redux、redux-thunk、redux-saga的基本使用与实现原理 ​

  • Redux（核心概念；三大原则；基本使用流程；实现原理；与React结合）
  • Redux-thunk（作用；基本使用；实现原理）
  • Redux-saga（作用；核心概念；基本使用；实现原理；与redux-thunk的对比）

八、假设页面有一万条数据，如何进行渲染？虚拟列表，WebWorker，分页加载 ​

  • 虚拟列表（核心思想；实现原理；关键参数；常见库的使用；优化点）
  • WebWorker（作用；适用场景；与React结合；限制）
  • 其他辅助方案（分页加载；滚动加载）

九、什么是MVC、MVVM ​

  • MVC（Model-View-Controller）（核心组成；工作流程；适用场景）
  • MVVM（Model-View-ViewModel）（核心组成；核心特性；与React的关系）
  • 两者对比（数据流差异；耦合度；开发效率）

十、React组件类型及区别 ​

  • 函数组件与类组件的对比（状态管理、生命周期、this指向等）
  • 纯组件（PureComponent）的原理（浅比较props和state决定是否重渲染）
  • 受控组件与非受控组件的区别（表单元素的状态控制方式）

十一、Hooks核心知识点 ​

  • 常用Hooks的使用场景及注意事项（useState、useEffect、useRef、useContext、useReducer等）
  • useEffect的依赖项、清理函数作用，以及模拟生命周期的方式（如componentDidMount、componentWillUnmount）
  • 自定义Hooks的设计原则（抽取复用逻辑、命名规范useXXX）
  • Hooks的底层原理（依赖链表、为什么不能在条件语句中使用）

十二、状态管理深入 ​

  • 组件间通信方式（父子组件props、兄弟组件context/状态提升、跨层级Context API）
  • setState的异步性与批量更新机制（何时同步、何时异步，flushSync的作用）

十三、React事件系统 ​

  • 合成事件（SyntheticEvent）与原生事件的区别（事件委托、跨浏览器兼容）
  • 事件冒泡与阻止冒泡的注意事项（e.stopPropagation() vs 原生事件阻止）

十四、协调（Reconciliation）与渲染（Commit）阶段 ​

  • 协调阶段：Diff算法的优化策略（同层比较、key的作用、列表Diff逻辑）
  • 渲染阶段：如何将虚拟DOM转换为真实DOM，以及ReactDOM.render的工作流程

十五、错误边界（Error Boundary） ​

  • 作用：捕获子组件渲染错误，避免整个应用崩溃
  • 实现方式：类组件的static getDerivedStateFromError和componentDidCatch方法

十六、Redux生态补充 ​

  • Redux中间件的作用及工作流程（如redux-thunk处理异步、redux-saga处理复杂副作用）
  • Redux与Context API的对比（适用场景、性能差异）
  • 现代状态管理工具（Redux Toolkit、Zustand、Jotai、Recoil）的使用与优势

十七、React Router进阶 ​

  • 路由守卫（如登录验证，通过useEffect或高阶组件实现）
  • 路由模式（hashHistory vs browserHistory的原理及部署注意事项）
  • 动态路由、嵌套路由的实现，以及useParams、useNavigate等Hooks的使用

十八、渲染优化细节 ​

  • React.memo的使用场景（避免不必要的函数组件重渲染，配合useMemo/useCallback）
  • useMemo与useCallback的区别（缓存值 vs 缓存函数引用）
  • 列表渲染优化（key的正确使用、避免索引作为key的问题）

十九、资源加载优化 ​

  • 代码分割（Code Splitting）的实现方式（React.lazy + Suspense）
  • 图片懒加载的React实现（结合IntersectionObserver API）

二十、React项目构建工具 ​

  • Create React App的配置原理，以及与Vite的对比（构建速度、热更新机制）
  • 模块化方案（ES Modules在React中的应用，与CommonJS的区别）

二十一、TypeScript与React ​

  • 函数组件、类组件的类型定义（FC泛型、Props接口）
  • Hooks的类型标注（如useState的泛型、useEffect的依赖类型）

二十二、测试相关 ​

  • React组件测试工具（Jest + React Testing Library）的基本使用
  • 单元测试与集成测试的区别，如何测试Hooks和异步逻辑

二十三、React18新特性 ​

  • 并发渲染（Concurrent Rendering）的概念及作用
  • 自动批处理（Automatic Batching）对setState性能的优化
  • Suspense的新能力（数据加载、代码分割的统一处理）
  • 服务器组件（Server Components）的基本概念与优势