为新的应用程序或网站选择正确的技术变得越来越困难。React 是发展最快的 Javascript 框架之一。随着 JavaScript 技术在行业中站稳脚跟，对 React 认证的需求一直在稳步上升。React 是世界各地前端开发人员的赢家，因为它的学习曲线短、可重用的组件和干净的抽象。为了帮助大家准备面试，我整理了一些最常见的 React 面试问题和答案。

让我们来看看者五个最常见的React面试问题:

1. React 的特点是什么?

JSX：JSX 是一个 JavaScript 语法扩展。 它是 React 中用于定义用户界面所需外观的术语。 借助 JSX 语言扩展，可以在与 JavaScript 代码相同的文件中编写 HTML 结构。

组件：单个React应用程序中有许多组件，因此了解它们是什么以及它们如何协同工作很重要。它将用户界面分成可以相互独立地重复使用和处理的组件。

虚拟DOM：在 React 中，虚拟DOM是存储在内存中的实际DOM的轻量级副本。与更新DOM中的每一项不同，虚拟DOM—次只更新一个对象。

单向数据绑定：在React 中，单向数据绑定确保一切都是模块化和快速的。React应用程序的单向数据流需要在父组件内嵌套子组件。

高性能：为了让事情顺利运行，React只更新已更改的部分。因此，Web应用程序的运行速度大大加快。

2. Real DOM 和 Virtual DOM的主要区别是什么? (真实DOM与虚拟DOM）

3. React的ES6 语法与ES5 在语法上有何不同?

在比较 ES5 和 ES6 时，更新了以下语法特性:

• 导入与要求
• 出口与出口
• 组件和功能
• 道具
• 状态

导入与要求

ES5 var React = require('react') ;

ES6 import React from 'react ' ;

出口与出口

ES5 module.exports = Component;

ES6 export default Component;

组件和功能

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

道具

// 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>
  }
}

状态

// 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>
  }
}

4.列出使用React的一些最重要的好处

React有许多显著的好处，包括:

• 它提高了程序的速度和响应能力。
• 它适用于客户端和服务器。
• JSX提高了代码的可读性
• 使用React，可以轻松集成Meteor和Angular等其他框架。
• 在React的帮助下编写UI测试用例变得轻而易举。

5、浏览器不支持 JSX 的原因是什么?

浏览器只支持 JavaScript 对象，但 JSX 不是其中之一。出于这个原因，JSX文件在发送到浏览器之前必须首先转换为像 Babel 这样的 JavaScript 对象。