助你面试顺利！10个最新react面试题和答案详解

如果你是一个有抱负的前端开发人员并准备面试，那么本文是专门为你准备的。本文的前10个React面试问题是一个完美的指南，可以帮助你学习React面试所需的所有概念，后面会有更多更深入的面试题。
但是在开始回答React的面试问题之前，让我们先快速了解一下React的需求和市场现状。慢慢地，JavaScript工具在市场上站稳了脚跟，对React认证的需求呈指数级增长。为开发应用程序或网站选择正确的技术变得越来越具有挑战性。
其中，React被认为是增长最快的Javascript框架。
React常见的一些面试问题如下:
1. 区分真实DOM和虚拟DOM。
2. 是什么反应？
3. React的特点是什么？
4. 列出React的一些主要优势。
5. React的局限性是什么？
6. JSX是什么？
7. 你如何理解虚拟DOM？解释它的工作。
8. 为什么浏览器不能读取JSX？
9. 与ES5相比，React的ES6语法有何不同？
10. React和Angular有什么不同？
到今天为止，Github上大约有1000个贡献者。虚拟DOM和可重用组件等独特的特性吸引了前端开发人员的注意。尽管它只是MVC(模型-视图-控制器)中的一个视图库，但它正在与Angular、Meteor、Vue等成熟的框架展开激烈的竞争。看看下图，它展示了流行JS框架的发展趋势：

文章图片
所以，下面是面试官最有可能问到的50个面试问题和答案。为了方便你的阅读，这里将React面试问题进行了分类。
1、区分真实DOM和虚拟DOM真实DOM：

更新缓慢。
可以直接更新HTML。
创建一个新的DOM if元素更新。
DOM操作非常昂贵。
太多的内存浪费。

虚拟DOM：

它更新速度更快。
不能直接更新HTML。
更新JSX if元素更新。
DOM操作非常简单。
没有内存浪费。

2、什么是react？React是Facebook在2011年开发的一个前端JavaScript库。它遵循基于组件的方法，这有助于构建可重用的UI组件。它用于开发复杂的交互式web和移动UI。尽管它只是在2015年才开放源代码，但它拥有一个最大的支持它的社区。
3、React的特点是什么？React的主要功能如下:
它使用虚拟DOM而不是实际的DOM。它使用服务器端呈现。它遵循单向数据流或数据绑定。
4、列出React的一些主要优势。【助你面试顺利！10个最新react面试题和答案详解】React的主要优势有:
它提高了应用程序的性能
它可以方便地在客户端和服务器端使用
因为JSX，代码的可读性增加了
React很容易与其他框架集成，如流星、Angular等
使用React，编写UI测试用例变得非常简单
5、React的局限性是什么？React的局限性如下:
React只是一个库，不是一个成熟的框架
它的库非常大，需要时间来理解
对于新手程序员来说，理解起来有点困难
由于使用内联模板和JSX，编码变得很复杂
6、什么是JSX？JSX是JavaScript XML的简写。
这是React使用的一种文件类型，它利用了JavaScript和类似模板语法的HTML的表达能力。
这使得HTML文件非常容易理解。
这个文件使应用程序更加健壮，并提高了它的性能。
下面是JSX的一个示例：

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

7、如何理解虚拟DOM？解释它的工作。虚拟DOM是一个轻量级的JavaScript对象，它最初只是真实DOM的副本。
它是一个节点树，将元素、它们的属性和内容作为对象及其属性列出。
React的render函数从React组件创建一个节点树。
然后，它根据数据模型中的变化更新这个树，这些变化是由用户或系统执行的各种操作引起的。
这个虚拟DOM只需要三个简单的步骤。

文章图片

当任何底层数据发生更改时，整个UI都将在虚拟DOM表示中重新呈现：
然后计算以前的DOM表示与新表示之间的差异。

文章图片

一旦计算完成，实际的DOM将只更新实际更改的内容。

文章图片
8、为什么浏览器不能读取JSX？浏览器只能读取JavaScript对象，但JSX不能读取普通的JavaScript对象。
因此，为了使浏览器能够读取JSX，首先，我们需要使用JSX转换器(如Babel)将JSX文件转换成JavaScript对象，然后将其传递给浏览器。
9、与ES5相比，React的ES6语法有何不同？语法从ES5改变为ES6有以下几个方面:

require vs import

// ES5 var React = require('react'); // ES6 import React from 'react';

export vs exports

// ES5 module.exports = Component; // ES6 export default Component;

component vs function

// ES5 var MyComponent = React.createClass({ render: function() { return < h3>Hello Edureka!< /h3> ; } }); // ES6 class MyComponent extends React.Component { render() { return < h3>Hello Edureka!< /h3> ; } }

props

// ES5 var App = React.createClass({ propTypes: { name: React.PropTypes.string }, render: function() { return < h3>Hello, {this.props.name}!< /h3> ; } }); // ES6 class App extends React.Component { render() { return < h3>Hello, {this.props.name}!< /h3> ; } }

state

// ES5 var App = React.createClass({ getInitialState: function() { return { name: 'world' }; }, render: function() { return < h3>Hello, {this.state.name}!< /h3> ; } }); // ES6 class App extends React.Component { constructor() { super(); this.state = { name: 'world' }; } render() { return < h3>Hello, {this.state.name}!< /h3> ; } }

10、React和Angular有什么不同？

主题	React	Angular
架构	只有视图的MVC	完整的MVC
渲染	服务端渲染	客户端渲染
DOM	使用虚拟DOM	使用真实DOM
数据绑定	单向绑定	双向绑定
调试	编译时调试	运行时调试
作者	Facebook	谷歌