React面试题总结

React面试题总结如下，涵盖基础知识、React组件、React Redux、React路由四个方面：

• 区分Real DOM和Virtual DOM

  Real DOM：浏览器渲染的真实DOM树，直接操作成本高（如重绘、回流）。

  Virtual DOM：轻量级JavaScript对象，模拟真实DOM结构。React通过对比新旧Virtual DOM的差异（Diff算法），仅更新变化部分到Real DOM，提升性能。

• 什么是React？

  由Facebook于2011年开发的前端JavaScript库，2015年开源。

  基于组件化开发，支持构建可复用的UI组件。

  适用于复杂交互式Web和移动应用开发，拥有庞大社区支持。

• React的特点

  使用Virtual DOM优化渲染效率。

  支持服务器端渲染（SSR），改善SEO和首屏加载速度。

  遵循单向数据流，数据从父组件流向子组件，状态管理更可控。

• React的主要优点

  性能优化：Virtual DOM减少直接操作真实DOM的开销。

  跨平台能力：代码可在客户端和服务器端复用。

  代码可读性：JSX语法结合HTML与JavaScript，逻辑清晰。

  易集成性：可与Meteor、Angular等框架混合使用。

  测试友好：UI测试用例编写简单（如Jest+Enzyme）。

• React的限制

  仅是库而非完整框架，需搭配路由（React Router）、状态管理（Redux）等工具。

  学习曲线陡峭，新手需掌握JSX、组件生命周期等概念。

  代码复杂度高，内联模板与JSX混合可能增加维护难度。

• 什么是JSX？

  JavaScript XML的缩写，是React的语法扩展，允许在JavaScript中编写类似HTML的模板。

  示例：

  render() { return ( <div> <h1>Hello World from Edureka!!</h1> </div> );}

• Virtual DOM的工作原理

  重新渲染：数据变化时，React组件重新生成Virtual DOM树。

  差异计算：通过Diff算法对比新旧Virtual DOM，找出最小变更部分。

  批量更新：仅将差异部分同步到真实DOM，减少重绘和回流。

• 浏览器无法直接读取JSX的原因

  JSX是语法糖，需通过Babel等工具转换为标准JavaScript对象后，浏览器才能解析。

• React ES6与ES5语法的区别

  模块导入/导出：

  // ES5var React = require('react');module.exports = Component;// ES6import React from 'react';export default Component;

  组件定义：

  // ES5var MyComponent = React.createClass({ render: function() { return <h3>Hello</h3>; }});// ES6class MyComponent extends React.Component { render() { return <h3>Hello</h3>; }}

  状态管理：

  // ES5getInitialState: function() { return { name: 'world' }; }// ES6constructor() { super(); this.state = { name: 'world' };}

• React与Angular的区别

  设计理念：React是库，强调灵活性和组件化；Angular是完整框架，提供“一站式”解决方案。

  数据流：React单向数据流；Angular双向数据绑定（通过ng-model）。

  学习成本：React需搭配其他工具；Angular内置依赖注入、模块化等，但概念复杂。

  性能：React的Virtual DOM更轻量；Angular的变更检测机制可能影响性能。

• 组件分类

  函数组件：无状态，接收props并返回JSX，适合纯展示逻辑。

  类组件：有状态，可访问生命周期方法（如componentDidMount），适合复杂交互。

  高阶组件（HOC）：接收组件并返回新组件，用于复用逻辑（如权限控制）。

  Hooks（React 16.8+）：函数组件中通过useState、useEffect等管理状态和副作用。

• 生命周期方法（类组件）

  挂载阶段：constructor → getDerivedStateFromProps → render → componentDidMount。

  更新阶段：getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate。

  卸载阶段：componentWillUnmount。

• Props与State的区别

  Props：组件外部传入的数据，不可修改（只读）。

  State：组件内部管理的数据，通过setState更新并触发重新渲染。

• 核心概念

  Store：单一数据源，存储应用状态。

  Action：描述状态变化的普通对象，需通过dispatch发送。

  Reducer：纯函数，接收当前状态和action，返回新状态。

  Dispatch：触发状态更新的唯一方法。

  Subscribe：监听状态变化，执行副作用（如重新渲染UI）。

• 工作流

  组件通过dispatch(action)发送更新请求。

  Reducer处理action，生成新状态。

  Store保存新状态，通知订阅者（如React组件）。

  组件通过connect或useSelector（Hooks）获取最新状态并重新渲染。

• React Router核心组件

  <BrowserRouter>：基于HTML5 History API的路由容器。

  <HashRouter>：通过URL hash实现路由，兼容旧浏览器。

  <Route>：定义路径与组件的映射关系。

  <Link>：导航链接，避免页面刷新。

  <Switch>：匹配第一个符合条件的路由（类似switch-case）。

• 动态路由示例

  <Route path="/user/:id" component={UserProfile} />

  通过this.props.match.params.id获取路由参数。

• 编程式导航

  使用history对象（通过withRouter或useHistory获取）：

  this.props.history.push('/home'); // 跳转到/home