React 常见面试题及答案

记录面试过程 常见问题，如有错误，欢迎批评指正

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使用，识别意外的副作用（如重复调用渲染函数），帮助提升代码质量。