如果你是一个有抱负的前端开发人员并准备面试，那么本文是专门为你准备的。本文的前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(

Hello World from Edureka!!

);

}

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

Hello Edureka!

;

}

});

// ES6

class MyComponent extends React.Component {

render() {

return

Hello Edureka!

;

}

}

props

// ES5

var App = React.createClass({

propTypes: { name: React.PropTypes.string },

render: function() {

return

Hello, {this.props.name}!

;

}

});

// ES6

class App extends React.Component {

render() {

return

Hello, {this.props.name}!

;

}

}

state

// ES5

var App = React.createClass({

getInitialState: function() {

return { name: 'world' };

},

render: function() {

return

Hello, {this.state.name}!

;

}

});

// ES6

class App extends React.Component {

constructor() {

super();

this.state = { name: 'world' };

}

render() {

return

Hello, {this.state.name}!

;

}

}

10、React和Angular有什么不同？

主题ReactAngular

架构只有视图的MVC完整的MVC

渲染服务端渲染客户端渲染

DOM使用虚拟DOM使用真实DOM

数据绑定单向绑定双向绑定

调试编译时调试运行时调试

作者Facebook谷歌

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！