ReactJS面试问题和答案（2023年）- 初级

在本文中，您将学习ReactJS面试中最常问的问题和答案。在继续学习ReactJS面试问题和答案之前，请先学习完整的ReactJS教程。

ReactJS是一种开源的JavaScript库，用于以声明性和高效的方式构建用户界面。它是一种基于组件的前端库，只负责MVC（Model View Controller）架构的视图层。React用于创建模块化的用户界面，并促进开发可重用的显示动态数据的UI组件。

让我们讨论一些常见的面试问题，这些问题对于前端开发或全栈开发角色的面试将非常有帮助。

此集合包含面试中常见的基本问题。

1. ReactJS是什么

ReactJS是一个JavaScript库，用于构建MVC体系结构中视图层的可重用组件。它非常高效，并使用虚拟DOM来渲染组件。它运行在客户端，并且使用JSX语法编写。

2. 解释MVC架构是什么

模型-视图-控制器（MVC）框架是一种将应用程序分为三个主要逻辑组件模型、视图和控制器的架构/设计模式。每个架构组件都用于处理应用程序的特定开发方面。它将业务逻辑和表示层彼此隔离。

3. 解释React的构建块是什么

React的五个主要构建块是：

组件： 这些是可返回HTML的可重用代码块。
JSX： 它代表JavaScript和XML，允许在React中编写HTML。
Props和State： Props类似于函数参数，State类似于变量。
Context： 它允许通过层次结构将数据作为props传递给组件。
虚拟DOM： 它是实际DOM的轻量级副本，使DOM操作更加容易。

4. 用不同之处解释React中的props和state

Props用于在组件之间传递数据。State是本地的数据存储，仅在组件内部可用，无法传递给其他组件。

属性	状态
数据从一个组件传递到另一个组件。	数据只在组件内部传递。
它是不可变的（不能修改）。	它是可变的（可以修改）。
属性可以与状态和函数组件一起使用。	状态只能与状态组件/类组件一起使用（16.0之前）。
属性是只读的。	状态既可读又可写。

5. 什么是React中的虚拟DOM

React使用存在的虚拟DOM，它类似于原始DOM的轻量级副本（DOM的虚拟表示）。因此，每当原始DOM中存在一个对象时，在React虚拟DOM中都有一个对应的对象。它们完全相同，但是它没有直接更改文档布局的能力。操作DOM是慢的，但是操作虚拟DOM很快，因为没有任何东西被绘制到屏幕上。因此，每当我们应用程序的状态发生变化时，虚拟DOM首先得到更新，而不是真正的DOM。

6. 什么是JSX

JSX基本上是常规JavaScript的语法扩展，用于创建React元素。然后将这些元素呈现到React DOM中。所有的React组件都是用JSX编写的。要在JSX代码段中嵌入任何JavaScript表达式，我们需要将该表达式用花括号{}括起来。

JSX示例：花括号{}中的名称表示JSX

const name = "Learner"; 
   
const element = <h1>Hello, 
{ name }.Welcome to GeeksforGeeks.< /h1>;

7. React中的组件及其类型是什么

组件是React的核心构建块之一。换句话说，我们可以说React中的每个应用程序都是由称为组件的片段组成的。组件使构建UI的任务变得更简单。

在React中，我们主要有两种类型的组件：

函数组件：函数组件只是JavaScript函数。我们可以通过编写JavaScript函数来创建React的函数组件。
类组件：类组件比函数组件稍微复杂一些。函数组件不知道程序中的其他组件，而类组件可以相互配合使用。我们可以将数据从一个类组件传递到另一个类组件。

8. 浏览器如何读取JSX

通常情况下，浏览器无法读取JSX，只能读取纯JavaScript。Web浏览器通过使用转译器来读取JSX。转译器用于将JSX转换为JavaScript，使用的转译器称为Babel。

9. 解释创建React应用程序并打印hello world的步骤

要安装React，首先确保计算机上已安装Node。安装完Node后，打开终端并输入以下命令。

npx create-react-app <<Application_Name>>

导航到文件夹。

cd <<Application_Name>>

这是ReactJS Hello World的第一段代码！

import React from 'react'; 
import './App.css'; 
function App() { 
   return ( 
      <div className="App"> 
         Hello World ! 
      </div> 
   ); 
} 
export default App;

输入以下命令来运行应用程序

npm start

10. 如何在React中创建一个事件

要创建一个事件，请编写以下代码。

function Component(){ 
     doSomething(e){ 
           e.preventDefault(); 
           // Some more response to the event 
     } 
    return ( 
           <button onEvent={doSomething}></button> 
    ); 
}

11. 解释在React中如何创建列表

列表在开发任何网站的用户界面中非常有用。列表主要用于在网站上显示菜单，例如导航栏菜单。在React中创建列表时，请使用数组的map方法，如下所示。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
   
const numbers = [1,2,3,4,5]; 
   
const updatedNums = numbers.map((number)=>{ 
    return <li>{number}</li>; 
}); 
   
ReactDOM.render( 
    <ul> 
        {updatedNums} 
    </ul>, 
    document.getElementById('root') 
);

12. React中的键是什么

“键”是在React中创建元素列表时需要包含的特殊字符串属性。键在React中用于标识列表中哪些项目发生了更改、更新或删除。换句话说，键用于给列表中的元素赋予身份。

13. 如何在React中写注释

在React中有两种方法可以写注释。

多行注释： 我们可以使用星号格式 /* */ 在React中编写多行注释。
单行注释： 我们可以使用双斜杠 // 在React中编写单行注释。

14. 解释React和Angular之间的区别

领域	React.js	Angular
用途	React.js 是一个 JavaScript 库。它只更新虚拟 DOM ，数据流始终以单向进行。	Angular 是一个框架。Angular 更新实际 DOM ，且数据流在架构中双向进行。
架构	React.js 更简化，遵循 MVC 模式，即 Model View Control。	架构较为复杂，遵循 MVVM 模式，即 Model View-ViewModel。
可扩展性	高度可扩展。	比 React.js 可扩展性较低。
数据绑定	支持单向数据绑定，即一方向数据绑定。	支持双向数据绑定，即两方向数据绑定。
DOM	有虚拟 DOM。	有普通 DOM。

15. 解释React中render方法的用法

React通过使用一个名为render()的函数将HTML渲染到网页中。该函数的目的是在指定的HTML元素中显示指定的HTML代码。在render()方法中，我们可以读取props和state，并将我们的JSX代码返回给应用程序的根组件。

16. React中的状态是什么

状态是React组件类的一个实例，它可以被定义为一组可观察的属性，控制组件的行为。换句话说，组件的状态是一个在组件的生命周期中可能会发生变化的对象。

17. 解释React中的props

React允许我们使用props（代表属性）来向组件传递信息。Props是可以在组件内部使用的对象。

我们可以从传递props的组件的类中访问任何props。如下所示可以访问props：

this.props.propName;

18. React中的高阶组件是什么

高阶组件（HOC）是一种高级的重用组件功能逻辑的方法。它只是接收原始组件并返回增强后的组件。HOC的好处在于编码和阅读都比较容易。同时，它可以帮助消除在每个组件中复制相同逻辑的问题。

19. 解释一下React中函数组件和类组件的区别

函数组件	类组件
函数组件只是一个纯粹的 JavaScript 函数，它接受 props 作为参数	类组件需要继承自 React.Component，并创建一个 render 函数
不使用 render 方法	必须有返回 JSX 的 render() 方法
也被称为无状态组件	也被称为有状态组件
不能在函数组件中使用 React 生命周期方法（例如 componentDidMount）。	可以在类组件中使用 React 生命周期方法（例如 componentDidMount）。
不使用构造函数。	使用构造函数，因为需要存储 state。