记录面试过程 常见问题，如有错误，欢迎批评指正
1. 什么是虚拟DOM？为什么它提高了性能？
虚拟DOM是React创建的一个轻量级JavaScript对象，表示真实DOM的结构。当状态变化时，React会生成新的虚拟DOM，并通过Diff算法比较新旧差异，仅更新变化的部分到真实DOM。这减少了直接操作DOM的次数，避免了昂贵的重绘和重排，从而提升性能。
2. React类组件和函数组件的区别？Hooks的作用是什么？
类组件：使用ES6类定义，有生命周期方法和状态（this.state）。
函数组件：无状态，但通过Hooks（如useState, useEffect）可管理状态和副作用。
Hooks作用：允许函数组件使用状态、生命周期等特性，简化代码并促进逻辑复用。
3. 解释useEffect的依赖数组的作用。
空数组[]：仅在组件挂载和卸载时执行（类似componentDidMount和componentWillUnmount）。
无数组：每次渲染后都执行。
包含变量的数组[a, b]：当a或b变化时执行。
4. 受控组件与非受控组件的区别？
受控组件：表单数据由React组件管理（通过value和onChange）。
非受控组件：表单数据由DOM自身管理，通过ref获取值（如<input ref={inputRef} />）。
5. 为什么列表渲染时需要key？
key帮助React识别元素变化，优化Diff算法效率。若缺少key，可能导致性能下降或渲染错误（如状态错乱）。
6. React Router如何实现动态路由和路由守卫？
动态路由 ：使用参数占位符（如<Route path="/user/:id" />），通过useParams()获取参数。
路由守卫 ：封装<Route>组件，结合useNavigate和条件渲染（如检查用户权限后重定向）。
7. React性能优化方法有哪些？
常用方法：
a、使用React.memo缓存组件。
b、useMemo和useCallback避免重复计算和函数重建。
c、代码分割（React.lazy + Suspense）实现懒加载。
d、避免在渲染函数中进行高开销操作。
8. Redux的核心概念是什么？与Context API的区别？
Redux核心 ：单一状态树，通过action触发reducer更新状态，使用中间件处理异步。
与Context区别 ：Redux适合大型应用全局状态管理，提供调试工具和中间件；Context适合局部跨层级数据传递，无需额外库。
9. React合成事件是什么？
React将浏览器原生事件封装为合成事件，提供跨浏览器一致性，并自动管理事件绑定（事件委托到根节点）。
10. 错误边界（Error Boundaries）如何实现？
通过类组件的static getDerivedStateFromError()和componentDidCatch()捕获子组件树中的错误，显示降级UI（函数组件暂不支持）。
11. React 18有哪些新特性？
主要特性：
a、并发模式（Concurrent Mode）：可中断渲染，优化用户体验。
b、自动批处理：合并多个状态更新，减少渲染次数。
c、新Hooks ：如useId生成唯一ID，useTransition管理非紧急更新。
12. Hooks使用规则有哪些？
规则：
只在函数组件或自定义Hooks顶层调用。
不能在循环、条件或嵌套函数中使用。
13. JSX是什么？如何转换为JavaScript？
JSX是语法糖 ，会被Babel转换为React.createElement()调用，生成React元素对象（如React.createElement('div', null, 'Hello')）。
14. 高阶组件（HOC）与Render Props的区别？
HOC ：通过函数包装组件，返回增强功能的新组件（如withRouter(Component)）。
Render Props ：通过组件传递函数prop动态渲染内容（如<DataProvider render={data => <Child data={data} />} />）。
15. React严格模式的作用？
检测不安全的生命周期方法、过时的API使用，识别意外的副作用（如重复调用渲染函数），帮助提升代码质量。