2022 年初级 React 开发人员的 5 大面试问题

科技 06-15 来源：海拥科技

为新的应用程序或网站选择正确的技术变得越来越困难。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）

真实DOM	虚拟DOM
需要一段时间才能更新。	它在更新方面更具响应性。
可以直接从命令行进行HTML更改。	无法直接更改HTML。
如果元素的数据发生变化，则会创建一个新的DOM。	如果元素发生更改，则JSX会更新。
为了操作 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 Hello Edureka!;
  },
})
// ES6 Function
class MyComponent extends React.Component {
  render() {
    return Hello Edureka!
  }
}

道具

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

状态

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