该内容主要整理关于 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 中不可变性原则的几个关键点：
- 数据一旦创建就不能被修改：在 React 中，组件的状态（
state）和属性（props）应该被视为不可变的。一旦创建了状态或属性对象，就不应该直接修改它们的值。这样可以确保组件的数据在更新时是不可变的，从而避免意外的数据改变和副作用。 - 创建新的数据对象：当需要更新状态或属性时，应该创建新的数据对象。这可以通过使用对象展开运算符、数组的
concat()、slice()等方法，或者使用不可变数据库（如Immutable.js、Immer等）来创建新的数据副本。 - 比较数据变化：React 使用
Virtual DOM来比较前后两个状态树的差异，并仅更新需要更新的部分。通过使用不可变数据，React 可以更高效地进行比较，因为它可以简单地比较对象引用是否相等，而不必逐个比较对象的属性。 - 性能优化：使用不可变数据可以带来性能上的优势。由于 React 可以更轻松地比较前后状态的差异，可以减少不必要的重新渲染和组件更新，提高应用的性能和响应性。
不可变性的原则在 React 中有以下好处：
- 简化数据变更追踪：由于数据不可变，可以更轻松地追踪数据的变化。这样可以更好地理解代码的行为和数据的流动。
- 避免副作用：可变数据容易引发副作用和难以追踪的 bug。通过使用不可变数据，可以避免许多与副作用相关的问题。
- 方便的历史记录和回滚：不可变数据使得记录和回滚应用状态的历史变得更容易。可以在不改变原始数据的情况下，创建和保存不同时间点的数据快照
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
)
