React面试题和答案(2024年收集更新)
2024年收集更新的React面试题和答案，下面列出了最常见的 React 面试问题和答案。
React 是 Facebook 于 2011 年开发的声明式、高效、灵活的开源前端 JavaScript 库。它遵循基于组件的方法来构建可重用的 UI 组件，特别是对于单页应用程序。它用于开发 Web 和移动应用程序的交互式视图层。它是由 Facebook 的软件工程师 Jordan Walke 创建的。它最初于 2011 年部署在 Facebook 的 News Feed 部分，后来被用于 WhatsApp 和 Instagram 等产品中。
完整答案
React框架迅速成为 Web 开发人员中最好的框架。React 的主要特点是：
JSX组件单向数据绑定虚拟 DOM简单性能
完整答案
以下是使用 React 的最关键优势的如下：
React 易于学习和使用React 提供了良好的文档、教程和培训资源。任何开发人员都可以轻松地从 JavaScript 背景切换到 React，并轻松理解并开始使用 React 创建 Web 应用程序。任何对 JavaScript 知之甚少的人都可以开始使用 React 构建 Web 应用程序。
React 遵循 MVC 架构React 是 MVC(Model-View-Controller)架构模型中的 V(视图部分)，被称为“JavaScrip...
完整答案
以下是 React 的最大限制(缺点)：
React 只是一个库。它不是一个完整的框架。React有一个庞大的库，需要时间来理解。新程序员可能很难理解和编码。React 使用内联模板和 JSX，这可能会很困难并充当障碍。它也使编码变得复杂。
完整答案
JSX 代表 JavaScript XML。它是一个 React 扩展，允许编写看起来类似于 HTML 的 JavaScript 代码。它使 HTML 文件易于理解。JSX 文件使 React 应用程序健壮并提高其性能。JSX 允许在编写 JavaScript 代码的同一文件中编写类似 XML 的语法，然后预处理器(即，像 Babel 这样的转译器)将这些表达式转换为实际的 JavaScript 代码。就像 XML/HTML 一样，JSX 标签也有标签名称、属性和子标签。
例子
class Ap...
完整答案
浏览器不能直接读取 JSX，因为它们只能理解 JavaScript 对象，而 JSX 不是常规的 JavaScript 对象。因此，我们需要使用 Babel 等转译器将 JSX 文件转换为 JavaScript 对象，然后将其传递给浏览器。
完整答案
它比常规 JavaScript 更快，因为它在将代码转换为 JavaScript 时执行优化。React 不是通过将标记和逻辑放在单独的文件中来分离技术，而是使用包含两者的组件。JSX是类型安全的，大部分错误都可以在编译时发现。JSX使创建模板变得更加容易。
完整答案
虚拟(Virtual)DOM是一个轻量级的 JavaScript 对象，它是真实 DOM 的内存表示。它是调用渲染函数和在屏幕上显示元素之间的中间步骤。它类似于将元素、它们的属性和内容作为对象及其属性列出的节点树。渲染函数创建 React 组件的节点树，然后更新此节点树以响应由用户或系统执行的各种操作导致的数据模型中的突变。
完整答案
虚拟(Virtual)DOM 分三个步骤工作：
第1步： 每当 React App 中的任何数据发生变化时，整个 UI 都会以 Virtual DOM 表示形式重新渲染。
第2步： 计算之前的 DOM 表示和新的 DOM 之间的差异。
第3步： 一旦计算完成，真实的 DOM 只更新那些被改变的东西。
完整答案
React与Angular 在以下方面不同：
比较项
Angular
React
作者
Google
Facebook 社区
开发商
Misko Hevery
Jordan Walke
初始版本
2010 年 10 月
2013 年 3 月
语言
JavaScript,
HTML JSX
类型
开源 MVC 框架
开源 JS 框架
渲染
客户端
服务器端
数据绑定
双向
单向
DOM
常规 DOM
虚拟 DOM
测试 单元和集成测试
单元测试
应...
完整答案
React 的 ES6 语法在以下方面与 ES5 语法有所不同。
require vs. Import
// ES5
var React = require('react');
// ES6
import React from 'react';
exports vs. export
// ES5
module.exports = Component;
// ES6
export default Component;
组件和函数
//...
完整答案
ReactJS 和 React Native 之间的主要区别如下所示：
编号
ReactJS
React Native
1
2013年首发。
2015年首发。
2
用于开发Web应用程序。
React Native用于开发移动应用程序。
3
可以在所有平台上执行。
React Native不是独立于平台的。在所有平台上执行都需要更多的努力。
4
ReactJS使用 JavaScript 库和 CSS 制作动画。
React Native带有内置的动画库。
5
Rea...
完整答案
下表指定了 Real DOM 和 Virtual DOM 之间的主要区别：
如果元素更新，真实的 DOM 会创建一个新的 DOM。
| 真实 DOM | 虚拟 DOM || 真正 DOM 更新较慢。| 虚拟 DOM 更新更快。|| 真正 DOM 可以直接更新 HTML。| 虚拟 DOM 不能直接更新 HTML。|| 如果元素更新 | 虚拟 DOM 会更新 JSX。|| 在真实 DOM 中，DOM 操作非常昂贵。| 在虚拟 DOM 中，DOM 操作非常容易。|| 真实 DOM 中存在大量内存浪费。...
完整答案
在 React 中，组件是 React 应用程序的构建块。这些组件将整个 React 应用程序的 UI 划分为小的、独立的、可重用的代码片段。React 独立渲染这些组件中的每一个，而不会影响应用程序 UI 的其余部分。因此，可以说，在 React 中，一切都是组件。
完整答案
每个 React 组件都必须有一个 render() 函数。渲染函数用于返回要在组件中显示的 HTML。如果需要渲染多个 HTML 元素，则需要在单个封闭标记(父标记)中组合在一起，例如 <div>、<form>、<group> 等。此函数每次调用时返回相同的结果 .
示例：如果需要显示标题，可以按如下方式进行：
import React from 'react'
class App extends React.Component { ...
完整答案
可以通过以下方式嵌入两个或多个组件：
import React from 'react'
class App extends React.Component {
render (){
return (
<h1>Hello World</h1>
)
}
}
class Example extends React.Component {
render (){ ...
完整答案
Props 代表 React 中的“属性”。它们是组件的只读输入。Props 是一个存储标签属性值的对象，其工作方式类似于 HTML 属性。它提供了一种在整个应用程序中将数据从父组件传递到子组件的方法。它类似于函数参数，并以与函数中传递参数相同的方式传递给组件。Props是不可变的，所以不能从组件内部修改道具。在组件内部，可以添加称为 props 的属性。这些属性在组件中作为 this.props 可用，可用于在 render 方法中渲染动态数据。
完整答案
State 是一个可更新的结构，它保存有关组件的数据和信息。响应用户操作或系统事件，它可能会在组件的生命周期内更改。它是反应组件的核心，它决定了组件的行为以及它将如何呈现。它必须尽可能简单。让我们创建一个带有“消息状态”的“User”组件。
import React from 'react'
class User extends React.Component {
constructor(props) {
super(props)
this...
完整答案
下面给出了States和Props之间的主要区别：
SN
Props
States
1
Props是只读的。
状态更改可以是异步的。
2
Props是不可变的。
状态是可变的。
3
Props 允许将数据从一个组件传递到其他组件作为参数。
状态保存有关组件的信息。
4
子组件可以访问props。
子组件不能访问状态。
5
props 用于组件之间的通信。
状态可用于呈现组件的动态变化。
6
无状态组件可以有Props。
无状态组件不能有状态。
7
Props...
完整答案
可以使用 this.setState() 方法更新组件的状态。此方法并不总是立即替换 State。它只添加对原始状态的更改。它是用于更新用户界面(UI)以响应事件处理程序和服务器响应的主要方法。
例子
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
construct...
完整答案
无状态组件和有状态组件的区别在于：
编号
无状态组件
有状态组件
1
无状态组件不持有或管理状态。
有状态的组件可以保持或管理状态。
2
它不包含过去、当前和可能的未来状态变化的知识。
它可以包含过去、当前和可能的未来状态变化的知识。
3
又称功能组件。
也被称为类组件。
4
简单易懂。
与无状态组件相比，它很复杂。
5
它不适用于 React 的任何生命周期方法。
它可以与 React 的所有生命周期方法一起使用。
6
无状态组件不能复用。
有状态的组件可以重...
完整答案
箭头函数是 ES6 标准的新特性。如果您需要使用箭头函数，则无需将任何事件绑定到this。这里，this 的范围是全局的，不限于任何调用函数。因此，如果使用箭头函数，则无需在构造函数中绑定this。它也被称为“胖箭头”(=>)函数。
//General way
render() {
return(
<MyInput onChange={this.handleChange.bind(this) } />
);
}
/...
完整答案
事件是由于用户操作或系统生成的事件(如鼠标单击、网页加载、按键、窗口大小调整等)而触发的操作。在 React 中，事件处理系统与处理非常相似 DOM 元素中的事件。React 事件处理系统称为 Synthetic Event，它是浏览器原生事件的跨浏览器包装器。使用 React 处理事件有一些语法差异，它们是：
React 事件被命名为 camelCase 而不是小写。使用 JSX，函数作为事件处理程序而不是字符串传递。
完整答案
可以创建一个事件如下：
class Display extends React.Component({
show(msgEvent) {
// code
},
render() {
// Here, we render the div with an onClick prop
return (
<div on...
完整答案
合成事件是一个对象，它充当浏览器原生事件的跨浏览器包装器。它将不同浏览器的原生事件的行为组合到一个 API 中，包括：stopPropagation() 和 preventDefault()。在给定的示例中，e 是一个合成事件。
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('You had clicked a Link...
完整答案
受控组件和非受控组件之间的区别是：
编号
受控组件
非受控组件
1
受控组件不保持其内部状态。
非受控组件保持其内部状态。
2
这里，数据由父组件控制。
非受控组件中数据由 DOM 本身控制。
3
受控组件接受它的当前值作为道具。
非受控组件使用 ref 作为它们的当前值。
4
受控组件允许验证控制。
不允许验证控制。
5
对表单元素和数据有更好的控制。
非受控组件对表单元素和数据的控制有限。
完整答案
列表用于以有序格式显示数据。在 React 中，列表的创建方式与我们在 JavaScript 中创建列表的方式类似。可以使用 map() 函数遍历列表的元素。
例子
import React from 'react';
import ReactDOM from 'react-dom';
function NameList(props) {
const myLists = props.myLists;
const listItems =...
完整答案
密钥是唯一标识符。在 React 中，它用于识别哪些项目已从列表中更改、更新或删除。当动态创建组件或用户更改列表时，它很有用。它还有助于确定集合中的哪些组件需要重新渲染，而不是每次都重新渲染整个组件集。它提高了应用程序的性能。
完整答案
表单允许用户与应用程序交互以及从用户那里收集信息。表单可以执行许多任务，例如用户身份验证、添加用户、搜索、过滤等。表单可以包含文本字段、按钮、复选框、单选按钮等。React 提供了一种有状态的、反应式的方法来构建表单。React 中的表单类似于 HTML 表单。但在 React 中，组件的 state 属性仅通过 setState() 更新，并由 JavaScript 函数处理它们的提交。此功能可以完全访问用户在表单中输入的数据。
import React, { Component } from...
完整答案
React组件生命周期的不同阶段是：
初始阶段：当组件开始其通往 DOM 的旅程时，它是 React 生命周期的诞生阶段。在这个阶段，一个组件包含默认的 Props 和初始状态。这些默认属性在组件的构造函数中完成。挂载阶段：在这个阶段，组件的实例被创建并添加到 DOM 中。更新阶段：这是 React 生命周期的下一个阶段。在这个阶段，我们获得了新的 Props 并改变了状态。只有当道具或状态发生变化时，这个阶段才有可能更新和重新渲染。此阶段的主要目的是确保组件显示其自身的最新版本。这个阶段一次...
完整答案
重要的 React 生命周期方法是：
getInitialState()： 用于指定 this.state 的默认值。它在创建组件之前执行。componentWillMount()： 在组件渲染到 DOM 之前执行。componentDidMount()： 当组件被渲染并放置在 DOM 上时执行。可以进行任何 DOM 查询操作。componentWillReceiveProps()： 当组件从父类接收到新的 props 并且在调用另一个渲染之前调用它。如果要更新 State 以响应 prop ...
完整答案
React 15.3 版本中引入的纯组件。React.Component 和 React.PureComponent 的不同在于 shouldComponentUpdate() React 生命周期方法。此方法通过返回一个布尔值(true 或 false)来决定组件的重新渲染。在 React.Component 中， shouldComponentUpdate()方法默认返回 true。但是在 React.PureComponent 中，它会比较 state 或 props 的变化来重新渲染组件...
完整答案
在 React 中，高阶组件是一种重用组件逻辑的高级技术。它是一个接受一个组件并返回一个新组件的函数。换句话说，它是一个接受另一个函数作为参数的函数。根据官网的说法，它不是 React API 中的特性(部分)，而是从 React 的组合性质中出现的一种模式。
完整答案
可以使用 HOC 完成许多任务，其中一些如下所示：
代码可重用性Props 操作状态操纵渲染劫持
完整答案
元素和组件之间的主要区别是：
编号
元素
组件
1
元素是描述组件状态和 DOM 节点及其所需属性的纯 JavaScript 对象。
组件是 React 应用程序的核心构建块。它是一个接受输入并返回 React 元素的类或函数。
2
它只保存有关组件类型、其属性以及其中的任何子元素的信息。
它可以包含状态和道具，并且可以访问 React 生命周期方法。
3
它是不可变的。
是可变的。
4
不能对元素应用任何方法。
可以在组件上应用方法。
完整答案
在 React 中，可以像在 JavaScript 中写注释一样写注释。它可以有两种方式：
单行注释：可以用大括号将注释写成 /* Block Comments */：{/* Single Line comment */}
多行注释：如果想注释多行，可以这样做：{ /*
Multi
line
comment
*/ }
完整答案
在 React 中，组件名称必须以大写字母开头。如果以小写开头的组件名称，它将作为无法识别的标签抛出错误。这是因为，在 JSX 中，小写标记名称被视为 HTML 标记。
完整答案
片段是在 React 16.2 版本中引入的。在 React 中，片段用于组件返回多个元素。它允许您对包含多个子项的列表进行分组，而无需向 DOM 添加额外的节点。
例子
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
) ...
完整答案
片段更快并且消耗更少的内存，因为它没有创建额外的 DOM 节点。一些 CSS 样式如 CSS Grid 和 Flexbox 具有特殊的父子关系，并在中间添加 <div> 标签，这使得难以保持所需的布局。DOM Inspector 不那么杂乱。
完整答案
props验证是一种工具，可以帮助开发人员避免未来的错误和问题。它使代码更具可读性。React 组件使用了特殊的属性 PropTypes，它通过验证通过 props 传递的值的数据类型来帮助您捕获错误，尽管不必使用 propTypes 定义组件。
可以在 React 组件中使用 App.propTypes 对 props 进行验证。当某些 props 以无效类型传递时，将在 JavaScript 控制台上收到警告。指定验证模式后，需要设置 App.defaultProps。
class App ...
完整答案
Create React App 是 Facebook 推出的用于构建 React 应用程序的工具。它为提供创建单页 React 应用程序。create-react-app 是预配置的，它可以让开发者免于像 Webpack 或 Babel 这样耗时的设置和配置。需要运行一个命令来启动 React 项目，如下所示：
$ npx create-react-app my-app
命令包括构建 React 应用程序所需的一切。其中一些如下：
它包括 React、JSX、ES6 和 Flow 语法支持...
完整答案
在 React 中创建组件有两种可能的方式：函数组件： 这是在 React 中创建组件的最简单方法。这些是接受 props 对象作为第一个参数并返回 React 元素的纯 JavaScript 函数：
function Greeting({ message }) {
return <h1>{`Hello, ${message}`}</h1>
}
类组件： 类组件方法方便使用 ES6 类来定义组件。上面的函数组件可以写成：
class Greeting ext...
完整答案
如果一个组件需要状态或生命周期方法，应该使用类组件； 否则，使用函数组件。但是，在 React 16.8 之后，通过添加 Hooks，可以在函数组件中使用状态、生命周期方法和其他仅在类组件中可用的功能。
完整答案
Web浏览器不能直接读取 JSX。这是因为 Web 浏览器仅用于读取常规 JS 对象，而 JSX 不是常规 JavaScript 对象。如果希望 Web 浏览器读取 JSX 文件，则必须将文件转换为常规 JavaScript 对象。为此，使用了 Babel。
完整答案
在 react 中，组件的状态是一个对象，其中包含一些可能在组件的生命周期内发生变化的信息。最好尝试使状态尽可能简单，并尽量减少有状态组件的数量。下面来看看如何创建一个带有消息状态的用户组件：
class User extends React.Component {
constructor(props) {
super(props)
this.state = {
message: 'Welcome to React world' ...
完整答案
以下是在比较 ES6 和 ES5 时可以看到的最明显的语法：
require vs import在 ES5 中的语法：
var React = require('react');
在 ES6 中的语法：
import React from 'react';
export vs exports在 ES5 中的语法：
module.exports = Component;
在 ES6 中的语法：
export default Component;
组件和函数在...
完整答案
在 React 中，props 是组件的输入。它们是单个值或对象，包含在创建时使用类似于 HTML 标记属性的命名约定传递给组件的一组值。它们是从父组件传递到子组件的数据。React 中 props 的主要目的是提供以下组件功能：
将自定义数据传递给您的组件。触发状态变化。通过组件的 render() 方法中的 this.props.reactProp 使用。
例如，创建一个带有 reactProp 属性的元素：
<Element reactProp={'1'} />...
完整答案
Refs 是 React 中用于引用的简写。它是一个属性，有助于存储对特定 DOM 节点或 React 元素的引用。它提供了一种访问 React DOM 节点或 React 元素以及如何与之交互的方法。当我们想要更改子组件的值而不使用 props 时使用它。
完整答案
可以使用 React.createRef() 创建 Refs 并通过 ref 属性附加到 React 元素。它通常在创建组件时分配给实例属性，然后可以在整个组件中引用。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.callRef = React.createRef();
}
render() {
return &l...
完整答案
Ref 转发是一种用于将 ref 通过组件传递到其子组件之一的功能。它可以通过使用 React.forwardRef() 方法来执行。它对高阶组件特别有用，并且专门用于可重用组件库。
例子
import React, { Component } from 'react';
import { render } from 'react-dom';
const TextInput = React.forwardRef((props, ref) => ( ...
完整答案
首选选项是在 findDOMNode() API 上使用回调引用。因为回调 refs 在设置和取消设置 refs 时提供了更好的控制，而 findDOMNode() 阻止了 React 未来的某些改进。
class MyComponent extends Component {
componentDidMount() {
findDOMNode(this).scrollIntoView()
}
render() {
return <div /...
完整答案
React中的 Ref 用于以下情况：
它用于返回对元素的引用。当需要 DOM 测量时使用它，例如管理焦点、文本选择或媒体播放。它用于触发命令式动画。它在与第三方 DOM 库集成时使用。它也可以在回调中使用 as。
完整答案
React Router 是一个建立在 React 之上的标准路由库系统。它用于使用 React Router Package 在 React 应用程序中创建路由。它可以帮助您在应用程序中定义多个路线。它为浏览器上的同步 URL 提供将在网页上显示的数据。它维护应用程序的标准结构和行为，主要用于开发单页 Web 应用程序。
完整答案
React Router 在单个页面应用程序中显示多个视图方面起着重要作用。它用于在应用程序中定义多个路由。当用户在浏览器中键入特定 URL 时，如果此 URL 路径与路由器文件中的任何“路由”匹配，则用户将被重定向到该特定路由。因此，我们需要向 React 应用程序添加一个 Router 库，它允许创建多个路由，每个路由都指向一个唯一的视图。
<switch>
<h1>React Router Example</h1>
<...
完整答案
React Router 的重要优点如下：
在这种情况下，无需手动设置浏览器历史记录。链接用于导航应用程序中的内部链接。它类似于锚标记。它使用 Switch 功能进行渲染。路由器只需要一个子元素。在此，每个组件都在 <Route> 中指定。这些包分为三个包，分别是 Web、Native 和 Core。它支持 React 应用程序的紧凑尺寸。
完整答案
React 路由和常规路由的区别在于：
编号
常规路由
React 路由
1
在常规路由中，每个视图都包含一个新文件。
在 React 路由中，只涉及一个 HTML 页面。
2
HTTP 请求被发送到服务器以接收相应的 HTML 页面。
只有历史属性 <BrowserRouter> 被更改。
3
在这种情况下，用户为每个视图浏览不同的页面。
在这种情况下，用户认为他正在浏览不同的页面，但这只是一种错觉。
完整答案
