面试题整理｜50个React面试题及解析

现如今，JavaScript 工具正在缓慢而稳定地扎根于市场，而React 被认为是增长最快的 Javascript 框架之一，因此使用需求也呈现指数级增长。
如果你是一名正在学习React或者准备面试相关岗位的前端人员，那么这篇关于React 面试的50个问题正好适合你。
为了便于查看，50个面试题型分为四大类型，分别是：

1、常见React 面试问题

2、React组件 面试问题

3、React Redux 面试问题

4、React Router 面试问题

面试题型均有解析，快来看看你能回答多少？

一、常见面试题

Q1:真实 DOM 和虚拟 DOM有什么区别？

真实DOM	虚拟DOM
更新很慢	更新较快
可以直接更新HTML	不能直接更新HTML
如果元素更新，则创建一个新的 DOM	如果元素更新，则更新 JSX
DOM 操作非常昂贵	DOM 操作非常简单
内存浪费太多	无内存浪费

Q2:什么是React？

• React 是 Facebook 于 2011 年开发的前端 JavaScript 库。
• 它遵循基于组件的方法，有助于构建可重用的 UI 组件。
• 它用于开发复杂的交互式 Web 和移动 UI。
• 尽管它仅在 2015 年才开源，但它是拥有最多支持的社区之一。

Q3:React有哪些特征？

• 它使用虚拟 DOM 而不是真实的 DOM
• 它可以使用服务器端渲染
• 它遵循单向数据流或数据绑定。

Q4 : 列出React的一些主要优点？

• 它提高了应用程序的性能

• 它可以方便地用于客户端和服务器端

• 由于使用JSX，使得代码的可读性增加

• React 很容易与 Meteor、Angular 等其他框架集成

• 使用 React，编写 UI 测试用例变得极其简单

Q5:React 的局限性是什么？

• React 只是一个库，而不是一个成熟的框架

• 它的库非常大，所以需要时间来理解

• 新手程序员理解起来可能有点困难

• 编码变得复杂，因为它使用内联模板和 JSX

Q6:什么是JSX？

JSX 是 JavaScript XML 的简写。这是 React 使用的一种文件类型，它利用了 JavaScript 的表现力以及类似 HTML 的模板语法。使得 HTML 文件非常容易理解。此文件使应用程序变得更强大并提高其性能。
下面是一个 JSX 的例子

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

Q7:你对虚拟 DOM 的理解是什么？解释它的工作原理？

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

1. 每当任何底层数据发生变化时，整个 UI 都会在虚拟 DOM 表示中重新呈现。
   

2. 然后计算之前的 DOM 和新的 DOM 之间的差异。
   

3. 计算完成后，真正的 DOM 将只更新实际更改的内容。
   

Q8:为什么浏览器不能读取 JSX？

浏览器只能读取 JavaScript 对象，但不能读取常规 JavaScript 对象中的 JSX。因此，为了让浏览器能够读取 JSX，首先，我们需要使用 Babel 等 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后将其传递给浏览器。

Q9:与 ES5 相比，React 的 ES6 语法有何不同？

从 ES5 到 ES6 的语法有以下几个方面的变化：
1）require vs import

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

2）export vs exports

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

3）component and 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>
;
    }
}

​
4）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}!<