ReactJS面试问题和答案（2023年）-中级水平

在本文中，您将了解ReactJS面试问题和答案-中级水平，这些问题在面试中最常见。在继续学习ReactJS面试问题和答案-中级水平之前，先学习完整的 ReactJS教程 ，以及 ReactJS面试问题和答案-初学者级别 。

ReactJS 是一个开源的 JavaScript 库，用于以声明性和高效的方式构建用户界面。它是一个基于组件的前端库，仅负责 MVC (模型-视图-控制器) 架构中的视图层。React 用于创建模块化的用户界面，并推动可重用的 UI 组件的开发，以显示动态数据。

1. 什么是 React 中的条件渲染

当在 React 中有多个组件，并且我们希望根据自己的偏好和一些条件来渲染组件时，我们使用条件渲染。在条件渲染中，指定了一个条件，如果条件通过，则渲染该组件。

让我们来看一下这段示例代码，以了解条件渲染。

{isLoggedIn == false ? <DisplayLoggedOut /> : <DisplayLoggedIn />}

如果boolean类型的变量isLoggedIn为假，则渲染DisplayLoggedOut组件；否则渲染DisplayLoggedIn组件。

2. react-router是什么

react-router是React中的标准库，用于进行路由管理。它可以在React应用程序中导航不同组件的视图，允许改变浏览器的URL，并保持UI与URL的同步。

要安装react-router，请键入以下命令。

npm i react-router-dom

3. React-router的组件解释

React-router的主要组件有：

Router（通常作为BrowserRouter导入）： 它是用于存储所有其他组件的父组件。在此之内的所有内容都将成为路由功能的一部分。
Switch： Switch组件用于仅渲染与位置匹配的第一个路由，而不是渲染所有匹配的路由。
Route： 该组件检查当前URL并显示与该路径精确匹配的组件。所有路由都放置在switch组件内部。
Link： Link组件用于创建到不同路由的链接。

4. 组件的生命周期方法解释

React组件的生命周期可以分为以下四个阶段：

初始化： 在这个阶段，组件使用给定的Props和默认状态进行构造。这是在组件类的构造函数中完成的。
挂载： 挂载是渲染自身render方法返回的JSX的阶段。
更新： 更新是当组件状态更新且应用程序重绘时的阶段。
卸载： 正如名称所示，卸载是组件生命周期的最后一个阶段，组件从页面中删除。

5. 挂载阶段中使用的方法解释

挂载是组件生命周期的阶段，初始化完成并将组件挂载在DOM上，并首次在网页上渲染的阶段。挂载阶段包括以下两个预定义函数：

componentWillMount()函数：此函数在组件挂载在DOM之前调用。
componentDidMount()函数：此函数在组件挂载在DOM之后调用。

6. React中的this.setState函数是什么

我们使用setState()方法来更改状态对象。它确保组件已更新并调用组件的重新渲染。组件的状态对象可能包含多个属性，React允许使用setState()函数仅更新这些属性的子集，以及使用多个setState()方法独立更新每个属性值。

7. 在React中ref的用途是什么

Ref是React提供的一种方法，用于访问DOM元素和自己创建的React元素。它们用于在不使用props等的情况下更改子组件的值。它们具有广泛的功能，因为我们可以在它们上面使用回调函数。

使用ref的语法是：

const node = this.myCallRef.current;

8. React中的hooks是什么

Hooks是React 16.8中的新功能。它们允许开发人员在不编写类的情况下使用状态和其他React功能。Hooks不违反任何现有的React概念。相反，Hooks为React的概念（例如props，state，context，refs和生命周期）提供了直接的API。

9. 解释一下React中的useState hook

在React中最常用的hook是useState() hook。它允许函数组件在每次渲染之前操纵DOM元素。使用这个hook，我们可以在函数内部声明一个状态变量，但是每个useState() hook只能声明一个状态变量。每当使用useState() hook时，状态变量的值会更改，并且新的变量会存储在堆栈中的新单元格中。

我们必须使用以下语法在React中导入这个hook：

import {useState} from 'react'

10. 在 React 中解释 useEffect 钩子

useEffect 钩子在 React 中用于消除使用基于类的组件时的副作用。它被用作 componentDidUpdate() 方法的替代方案。useEffect 钩子接受两个参数，其中第二个参数是可选的。

useEffect(function, dependency)

依赖项决定组件在渲染后何时再次更新。

11. React Fragments是什么

当我们尝试渲染多个根元素时，我们必须将整个内容放在‘div’标签内，这并不受许多开发人员的喜爱。所以从React 16.2版本开始，引入了Fragments，我们使用它们来代替多余的‘div’标签。以下语法用于在React中创建Fragment。

<React.Fragment>    
    <h2>Child-1</h2>     
    <p> Child-2</p>     
</React.Fragment>

12. 什么是React开发者工具

React开发者工具是针对React JavaScript库的Chrome DevTools扩展。如果你正在开发React.js应用程序，这是一个非常有用的工具。该扩展将React调试工具添加到Chrome开发者工具中。它帮助您查看和编辑构建页面的React组件树，并检查每个组件的props、state、hooks等。

13. 如何在ReactJS中使用样式

CSS模块是一种局部限定CSS文件内容的方法。我们可以通过将CSS文件命名为App.modules.css来创建CSS模块文件，然后可以使用以下特殊语法在App.js文件中导入它。

语法：

import styles from './App.module.css';

14. 在React中解释styled components

Styled-component模块允许我们以一种非常模块化和可重用的方式在React中将CSS写入JavaScript。与为React项目使用一个全局CSS文件不同，我们可以使用styled-component来增强开发人员的体验。它还消除了组件和样式之间的映射-使用组件作为低级别的样式构造

安装styled components的命令是

npm i styled-components

使用以下代码，我们可以在React中自定义样式按钮。

import styled from 'styled-components'
  
const Button = styled.div` 
    width : 100px ; 
    cursor: pointer ; 
    text-decoration : none; 
` 
  
export default Button;

15. 什么是属性传递（prop drilling）及其缺点

属性传递（prop drilling）是指在最终级别的需求下，同样的数据几乎在每个级别都传递。属性传递的问题是，无论是否需要，在从父组件获取数据时，都必须从每个级别获取数据。

16. React中控制组件和非控制组件分别是什么

控制组件是由父组件管理的组件，其值通过props进行更新，而非控制组件则维护其自己的状态，并且数据流仅在组件内部完成，不像控制组件那样将数据从父组件传递给子组件。

17. React中的useRef钩子是什么

useRef是一个钩子，它允许在函数式组件中直接创建对DOM元素的引用。useRef返回一个可变的引用对象，该对象有一个名为.current的属性，值在refContainer.current属性中保留。这些值可以从返回对象的current属性中访问。

语法：

const refContainer = useRef(initialValue);

18. 解释一下React中的componentDidMount方法

componentDidMount()方法允许我们在组件已经被放置在DOM（文档对象模型）中时执行React代码。该方法在React生命周期的Mounting阶段被调用，即组件被渲染之后。

19. React中ES6和ES5语法的区别

不同语法的区别如下表所示

语法	ES5	ES6
导入	var React = require(‘react’);	import React from ‘react’;
导出	module.exports = Component;	export default Component;
函数定义	var sum = function(x, y) { return x + y; };	var sum = (x,y)=>{ return x+y };