助你面试顺利！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的一些主要优势。

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有什么不同？