2024 高级前端面试题之 React 「精选篇」

该内容主要整理关于 React 模块的相关面试题,其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。

React模块精选篇

  • 1. 如何理解React State不可变性的原则
  • 2. JSX本质
  • 3. React合成事件机制
  • 4. setState和batchUpdate机制
  • 5. 组件渲染和更新过程
  • 6. Diff算法相关
  • 7. 受控组件与非受控组件
  • 8. 组件生命周期
  • 9. Portal传送门
  • 10. Context
  • 11. 异步组件
  • 12. 性能优化
  • 13. 高阶组件和Render Props
  • 14. React Hooks相关
  • 15. Redux相关
  • 16. React中Ref几种创建方
  • 17. 为什么 React 元素有一个 $$typeof 属性
  • 18. React 如何区分 Class组件 和 Function组件
  • 19. react组件的划分业务组件技术组件
  • 20. React如何进行组件/逻辑复用?
  • 21. 说说你用react有什么坑点
  • 22. react和vue的区别
  • 23. React18新增了哪些特性


1. 如何理解React State不可变性的原则

在 React 中,不可变性是指数据一旦被创建,就不能被修改。React 推崇使用不可变数据的原则,这意味着在更新数据时,应该创建新的数据对象而不是直接修改现有的数据。

以下是理解 React 中不可变性原则的几个关键点:

  1. 数据一旦创建就不能被修改:在 React 中,组件的状态(state)和属性(props)应该被视为不可变的。一旦创建了状态或属性对象,就不应该直接修改它们的值。这样可以确保组件的数据在更新时是不可变的,从而避免意外的数据改变和副作用。
  2. 创建新的数据对象:当需要更新状态或属性时,应该创建新的数据对象。这可以通过使用对象展开运算符、数组的 concat()slice() 等方法,或者使用不可变数据库(如 Immutable.jsImmer 等)来创建新的数据副本。
  3. 比较数据变化:React 使用 Virtual DOM 来比较前后两个状态树的差异,并仅更新需要更新的部分。通过使用不可变数据,React 可以更高效地进行比较,因为它可以简单地比较对象引用是否相等,而不必逐个比较对象的属性。
  4. 性能优化:使用不可变数据可以带来性能上的优势。由于 React 可以更轻松地比较前后状态的差异,可以减少不必要的重新渲染和组件更新,提高应用的性能和响应性。

不可变性的原则在 React 中有以下好处:

  1. 简化数据变更追踪:由于数据不可变,可以更轻松地追踪数据的变化。这样可以更好地理解代码的行为和数据的流动。
  2. 避免副作用:可变数据容易引发副作用和难以追踪的 bug。通过使用不可变数据,可以避免许多与副作用相关的问题。
  3. 方便的历史记录和回滚:不可变数据使得记录和回滚应用状态的历史变得更容易。可以在不改变原始数据的情况下,创建和保存不同时间点的数据快照

2. JSX本质

3. React合成事件机制

4. setState和batchUpdate机制

  • setState主流程
  • batchUpdate机制
  • transaction事务机制
  • 传入 setState 函数的第二个参数的作用是什么
  • 调用 setState 之后发生了什么
  • setState总结

5. 组件渲染和更新过程

6. Diff算法相关

  • 为什么虚拟dom会提高性能
  • react 的渲染过程中,兄弟节点之间是怎么处理的?也就是 key 值不一样的时候
  • diff算法
  • Diff 的瓶颈以及 React 的应对
  • React 中 key 的作用是什么
  • 关于Fiber

7. 受控组件与非受控组件

  • 受控组件
  • 非受控组件

8. 组件生命周期

  • react旧版生命周期函数
  • 新版生命周期
  • 为什么有些react生命周期钩子被标记为UNSAFE
  • 在生命周期中的哪一步你应该发起 AJAX 请求

9. Portal传送门

10. Context

11. 异步组件

12. 性能优化

  • 使用shouldComponentUpdate优化
  • PureComponent和React.memo
  • 优化性能的方式小结
  • React实现的移动应用中,如果出现卡顿,有哪些可以考虑的优化方案

13. 高阶组件和Render Props

  • 高阶组件
  • render props
  • 拓展:vue中实现高阶组件

14. React Hooks相关

  • React Hooks带来了那些便利
  • class组件存在哪些问题
  • 用useState实现state和setState功能
  • 用useEffect模拟组件生命周期
  • 用useEffect模拟WillUnMount时的注意事项
  • useRef和useContext
  • useRef
  • useContext
  • useReducer能代替redux吗
  • 使用useMemo做性能优化
  • 使用useCallback做性能优化
  • 什么是自定义Hook
  • 使用Hooks的两条重要规则
  • 为何Hooks要依赖于调用顺序
  • class组件逻辑复用有哪些问题
  • Hooks组件逻辑复用有哪些好处
  • Hooks使用中的几个注意事项

15. Redux相关

  • 简述flux 思想
  • redux中间件
  • redux有什么缺点
  • Redux设计理念
  • Redux怎么实现dispstch一个函数
  • connect高级组件原理
  • Dva工作原理

16. React中Ref几种创建方

  • 三种使用 Ref 的方式
  • 使用Ref获取组件实例
  • 函数组件传递forwardRef
  • useImperativeHandle

17. 为什么 React 元素有一个 $$typeof 属性

18. React 如何区分 Class组件 和 Function组件

19. react组件的划分业务组件技术组件

20. React如何进行组件/逻辑复用?

21. 说说你用react有什么坑点

22. react和vue的区别

  • 前言介绍
  • vdom
  • dsl 的编译
  • 渲染 vdom
  • 组件
  • 状态管理
  • react 架构的演变
  • fiber 架构

23. React18新增了哪些特性

  • 前言
  • 新特性一览
  • Render API
  • setState合并更新
  • flushSync
  • 改进Suspense
  • 支持Concurrent模式
  • 组件返回undefined不再报错
  • startTransition
  • useDeferredValue

你可能感兴趣的:(前端面试,React系列,面试宝典,前端,react.js,前端框架,面试,javascript)