React 各模块相关全面面试及答案解析
一、核心概念
1、什么是React？它的核心特性是什么？
答案：React是用于构建UI的JavaScript库。核心特性包括组件化、虚拟DOM、单向数据流和声明式编程。
2、解释虚拟DOM的工作原理。
答案：虚拟DOM是内存中的轻量DOM表示，React通过Diff算法比较新旧虚拟DOM差异，最小化真实DOM操作。
3、JSX是什么？为什么使用它？
答案：JSX是语法扩展，允许在JS中写类似HTML的结构。Babel将其转为React.createElement()调用。
4、React组件间如何通信？
答案：父子组件通过Props传递数据，子到父通过回调函数；跨层级用Context、Redux或事件总线。
5、React中key的作用是什么？
答案：key帮助React识别元素唯一性，优化列表渲染性能，避免元素位置变化导致的错误。
二、组件与生命周期
1、类组件与函数组件的区别？
答案：类组件使用class和生命周期方法；函数组件用Hooks管理状态和副作用。
2、列出React类组件的生命周期方法。
答案：
挂载：constructor, render, componentDidMount
更新：shouldComponentUpdate, render, componentDidUpdate
卸载：componentWillUnmount
3、componentDidMount和useEffect(() => {}, [])的区别？
答案：两者功能相似，但useEffect在布局和绘制后异步执行，componentDidMount同步执行。
4、什么是错误边界（Error Boundary）？如何实现？
答案：捕获子组件错误的类组件，需定义static getDerivedStateFromError()和componentDidCatch()。
5、React中的合成事件（Synthetic Event）是什么？
答案：React封装浏览器原生事件，提供跨浏览器一致性和自动事件委托。
三、Hooks
1、useState的作用是什么？示例代码。
const [count, setCount] = useState(0);
useEffect如何模拟componentDidMount和componentWillUnmount？
useEffect(() => {
// componentDidMount
return () => { /* componentWillUnmount */ };
}, []);
2、useMemo和useCallback的区别？
答案：useMemo缓存计算结果，useCallback缓存函数引用。
3、自定义Hook的命名规则是什么？示例。
答案：以use开头，如useFetch，内部可调用其他Hooks。
4、为什么Hooks不能放在条件或循环中？
答案：Hooks依赖调用顺序，条件/循环会破坏顺序，导致状态错乱。
四、状态管理
1、React中的状态提升（Lifting State Up）是什么？
答案：将共享状态提升到最近的共同父组件，通过Props传递数据。
2、Redux的核心概念是什么？
答案：Store（单一状态源）、Action（事件描述）、Reducer（纯函数更新状态）。
3、Redux中间件（如Redux Thunk）的作用？
答案：处理异步操作，允许Action返回函数而非普通对象。
4、Context API的使用场景？
答案：跨层级组件共享数据（如主题、用户信息），避免Props逐层传递。
5、MobX和Redux的区别？
答案：MobX使用响应式编程，自动追踪状态变化；Redux基于不可变数据和纯函数。
五、路由
1、React Router的和区别？
答案：BrowserRouter使用HTML5 History API（需要服务器支持），HashRouter用URL hash。
2、如何实现路由守卫（如登录验证）？
const PrivateRoute = ({ children }) => {
const isAuthenticated = checkAuth();
return isAuthenticated ? children : <Navigate to="/login" />;
};
3、动态路由参数如何获取？
答案：使用useParams()（React Router v6）。
4、和标签的区别？
答案：阻止页面刷新，通过React Router导航；触发页面刷新。
六、性能优化
1、如何避免不必要的组件渲染？
答案：使用React.memo、shouldComponentUpdate、useMemo/useCallback。
2、代码分割（Code Splitting）的实现方式？
答案：React.lazy() + Suspense，或Webpack的import()动态导入。
3、React中的“协调（Reconciliation）”是什么？
答案：React通过Diff算法比较新旧虚拟DOM，决定如何高效更新真实DOM。
4、什么是“纯组件（PureComponent）”？
答案：类组件自动实现shouldComponentUpdate，浅比较Props和State。
七、高级主题
1、React Fiber架构的目标是什么？
答案：实现增量渲染，允许中断和恢复渲染过程，提升复杂应用的性能。
2、React中的Portals是什么？使用场景？
答案：ReactDOM.createPortal(child, container)，用于将子节点渲染到DOM外的位置（如模态框）。
3、React服务端渲染（SSR）的原理和优势？
答案：服务器生成HTML发送到客户端，加速首屏加载，利于SEO。
4、如何实现React组件的国际化（i18n）？
答案：使用库如react-i18next，配合JSON语言文件动态切换内容。
八、常见问题与陷阱
1、为什么直接修改State是错误的？
答案：React依赖不可变数据触发更新，直接修改不会触发重新渲染。
2、setState是同步还是异步的？
答案：在React合成事件和生命周期中是异步的，在setTimeout或原生事件中是同步的。
3、如何解决this指向问题？
答案：类组件中通过构造函数绑定this，或使用箭头函数。
九、React 18新特性
1、自动批处理（Automatic Batching）是什么？
答案：React 18默认将多个状态更新合并为单次渲染，减少重复渲染。
2、useTransition的作用是什么？
答案：标记非紧急更新，允许用户在高优先级任务（如输入）期间保持界面响应。
3、并发模式（Concurrent Mode）的核心优势？
答案：可中断渲染，优先处理用户交互，提升复杂应用体验。
十、测试与工具
1、如何测试React组件？
答案：使用Jest + React Testing Library，模拟用户行为而非实现细节。
2、React DevTools的主要功能？
答案：检查组件树、状态、Props，分析性能，调试Hooks。