【19】进大厂必须掌握的面试题-50个React面试

点击上方“全栈程序员社区”，星标公众号

这是最有可能由面试官提出的 常被问到的50个React面试问答。为了方便您访问，我对React面试问题进行了归类：

• React一般面试问题

• 反应组件面试问题

• React Redux面试问题

• React Router面试问题

一般React – React面试问题

1.区分真实DOM和虚拟DOM。

2.什么是React？

• React是Facebook在2011年开发的前端JavaScript库。

• 它遵循基于组件的方法，该方法有助于构建可重用的UI组件。

• 它用于开发复杂的交互式Web和移动UI。

• 即使仅在2015年才开源，它还是支持它的最大社区之一。

3. React的功能是什么？

React的主要功能如下：

1. 它使用虚拟DOM而不是真实DOM。

2. 它使用服务器端渲染。

3. 它遵循单向数据流或数据绑定。

4.列出React的一些主要优点。

React的一些主要优点是：

1. 它提高了应用程序的性能

2. 它可以方便地在客户端和服务器端使用

3. 由于有了JSX，代码的可读性提高了

4. React易于与其他框架（如Meteor，Angular等）集成

5. 使用React，编写UI测试用例变得非常容易

5. React的局限性是什么？

下面列出了React的局限性：

1. React只是一个库，而不是一个成熟的框架

2. 它的图书馆很大，需要花费一些时间来理解

3. 对于新手程序员而言，理解起来可能有点困难

4. 由于使用内联模板和JSX，编码变得复杂

6.什么是JSX？

JSX是JavaScript XML的简写。这是React使用的一种文件，它利用JavaScript的表现力以及类似模板语法的HTML。这使得HTML文件非常容易理解。该文件使应用程序健壮并提高其性能。以下是JSX的示例：

render(){
    return(            
            <div>           
                <h1> Hello World from Edureka!!</h1>
            </div>
    );
}

7.您对Virtual DOM有什么了解？解释它的工作。

虚拟DOM是轻量级的JavaScript对象，其最初只是真实DOM的副本。它是一个节点树，列出了元素，它们的属性和内容作为对象及其属性。React的render函数从React组件中创建一个节点树。然后，它会响应由用户或系统执行的各种操作引起的数据模型中的突变来更新此树。该虚拟DOM只需三个简单的步骤。

1. 无论何时任何基础数据发生更改，整个UI都将以虚拟DOM表示形式重新呈现。

2. 然后计算先前的DOM表示和新的DOM表示之间的差异。

3. 一旦完成计算，将仅使用实际已更改的内容来更新实际DOM。

8.为什么浏览器无法阅读JSX？

浏览器只能读取JavaScript对象，而不能读取普通JavaScript对象中的JSX。因此，要使浏览器能够读取JSX，首先，我们需要使用Babel之类的JSX转换器将JSX文件转换为JavaScript对象，然后将其传递给浏览器。

9.与ES5相比，React的ES6语法有何不同？

语法在以下方面从ES5更改为ES6：

1. 需要与导入

   // ES5
   var React = require('react');
   
   // ES6
   import React from 'react';
   

2. 出口与出口

   // ES5
   module.exports = Component;
   
   // ES6
   export default Component;
   

3. 组成和功能

   // ES5
   var MyComponent = React.createClass({
       render: function() {
           return <h3>欢迎关注Java架构师社区公众号!</h3>;
       }
   });
   
   // ES6
   class MyComponent extends React.Component {
       render() {
           return <h3>欢迎关注全栈程序员社区公众号!</h3>;
       }
   }
   

4. 道具

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

5. 州

   // ES5
   var App = React.createClass({
       getInitialState: function() {
           return { name: 'Java架构师社区' };
       },
       render: function() {
           return <h3>Hello, {this.state.name}!</h3>;
       }
   });
   
   // ES6
   class App extends React.Component {
       constructor() {
           super();
           this.state = { name: '全栈程序员社区' };
       }
       render() {
           return <h3>Hello, {this.state.name}!</h3>;
       }
   }
   

10. React与Angular有何不同？

React组件– React面试问题

11.您从“在React中，一切都是组件”中了解到什么。

组件是React应用程序UI的构建块。这些组件将整个UI分成独立且可重用的小块。然后，它使这些组件中的每个组件彼此独立，而不会影响UI的其余部分。

12.解释React中render（）的目的。

每个React组件必须强制具有render（）。它返回单个React元素，它是本机DOM组件的表示形式。如果需要渲染多个HTML元素，则必须将它们组合在一个封闭的标记内，例如

，，

等。此函数必须保持纯净，即，它必须返回相同的结果每次被调用。

13.如何将两个或多个组件嵌入到一个组件中？

我们可以通过以下方式将组件嵌入到一个组件中：

class MyComponent extends React.Component{
    render(){
        return(                
            <div>            
                <h1>Hello</h1>
                <Header/>
            </div>
        );
    }
}
class Header extends React.Component{
    render(){
        return <h1>Header Component</h1>
   };
}
ReactDOM.render(
    <MyComponent/>, document.getElementById('content')
);

14.什么是Properties？

道具是React中Properties的简写。它们是只读组件，必须保持纯净即不变。在整个应用程序中，它们始终从父组件传递到子组件。子组件永远无法将道具发送回父组件。这有助于维持单向数据流，通常用于呈现动态生成的数据。

15. React中的状态是什么，如何使用？

状态是React组件的核心。状态是数据的来源，必须保持尽可能简单。基本上，状态是确定组件渲染和行为的对象。与道具不同，它们是可变的，并创建动态和交互的组件。通过 this.state（）访问它们。

16.区分状态和道具。

17.如何更新组件的状态？

可以使用this.setState（）更新组件的状态。

class MyComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'Maxx',
            id: '101'
        }
    }
    render()
        {
            setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
            return (                                 
                <div>              
                    <h1>Hello {this.state.name}</h1>
                    <h2>Your Id is {this.state.id}</h2>
                </div>
            );
        }
    }
ReactDOM.render(
    <MyComponent/>, document.getElementById('content')
);

18. React中的箭头功能是什么？如何使用？

箭头函数是用于编写函数表达式的简短语法。它们也称为“胖箭头”（=>）函数。这些功能允许正确绑定组件的上下文，因为默认情况下在ES6中自动绑定不可用。箭头函数在使用高阶函数时最有用。

//General way
render() {    
    return(
        <MyInput onChange={this.handleChange.bind(this) } />
    );
}
//With Arrow Function
render() {  
    return(
        <MyInput onChange={ (e) => this.handleOnChange(e) } />
    );
}

19.区分有状态和无状态组件。

20. React组件的生命周期有哪些不同阶段？

React组件的生命周期分为三个不同阶段：

1. 初始渲染阶段： 这是组件即将开始其生命周期并进入DOM的阶段。

2. 更新阶段： 组件添加到DOM后，只有在更改属性或属性时，它才有可能更新和重新渲染。那只发生在这个阶段。

3. 卸载阶段：这是组件生命周期的最后阶段，在该阶段中， 组件被销毁并从DOM中删除。

21.详细解释React组件的生命周期方法。

一些最重要的生命周期方法是：

1. componentWillMount （） – 在呈现在客户端和服务器端之前执行。

2. componentDidMount （） – 仅在第一个渲染之后在客户端执行。

3. componentWillReceiveProps （） –从父类接收到道具之后，在调用另一个渲染之前调用。

4. shouldComponentUpdate （） – 根据某些条件返回true或false值。如果要更新组件，则返回true，否则返回false。默认情况下，它返回false。

5. componentWillUpdate （） –在DOM中进行渲染之前调用。

6. componentDidUpdate （） – 渲染发生后立即调用。

7. componentWillUnmount （） –从DOM卸载组件后调用。用于清除内存空间。

22. React中有什么事件？

在React中，事件是对特定动作（如鼠标悬停，鼠标单击，按键等）的触发反应。处理这些事件类似于处理DOM元素中的事件。但是在语法上存在一些差异，例如：

1. 事件使用驼峰式大小写而不是仅使用小写字母命名。

2. 事件是作为函数而不是字符串传递的。

事件参数包含一组特定于事件的属性。每个事件类型都包含其自己的属性和行为，这些属性和行为只能通过其事件处理程序进行访问。

23.如何在React中创建事件？

class Display extends React.Component({    
    show(evt) {
        // code   
    },   
    render() {      
        // Render the div with an onClick prop (value is a function)        
        return (            
           <div onClick={this.show}>Click Me!</div>
        );    
    }
});

24.什么是React中的综合事件？

合成事件是充当浏览器本地事件周围的跨浏览器包装的对象。它们将不同浏览器的行为组合到一个API中。这样做是为了确保事件在不同的浏览器中显示一致的属性。

25.您对React中的引用有什么了解？

Refs是React中References的简写。它是一个属性，有助于存储对特定React元素或组件的引用，该引用将由组件渲染配置函数返回。它为u sed将引用返回到（）的特定元素或组分被渲染返回。当我们需要DOM测量或向组件添加方法时，它们会派上用场。

class ReferenceDemo extends React.Component{
     display() {
         const name = this.inputDemo.value;
         document.getElementById('disp').innerHTML = name;
     }
     render() {
        return(         
            <div>
                Name: <input type="text" ref={input => this.inputDemo = input} />
                <button name="Click" onClick={this.display}>Click</button>            
                <h2>Hello <span id="disp"></span> !!!</h2>
            </div>
        );
    }
 }

26.列出一些应该使用参考的情况。

以下是应使用ref的情况：

• 当您需要管理焦点时，选择文本或媒体播放

• 触发命令式动画

• 与第三方DOM库集成

27.如何在React中模块化代码？

我们可以通过使用export和import属性来模块化代码。它们有助于将组件分别写入不同的文件中。

//ChildComponent.jsx
export default class ChildComponent extends React.Component {
    render() {
        return(           
            <div>           
                <h1>This is a child component</h1>
            </div>
        );
    }
}

//ParentComponent.jsx
import ChildComponent from './childcomponent.js';
class ParentComponent extends React.Component {    
    render() {        
        return(              
            <div>               
                <App />          
            </div>
        );  
    }
}

28. 在React中如何创建表单？

React表单类似于HTML表单。但是在React中，状态包含在组件的state属性中，并且只能通过setState（）进行更新。因此，元素无法直接更新其状态，并且其提交由JavaScript函数处理。此功能可以完全访问用户输入到表单中的数据。

handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
}

render() {
    return (          
        <form onSubmit={this.handleSubmit}>
            <label>
                Name:
                <input type="text" value={this.state.value} onChange={this.handleSubmit} />
            </label>
            <input type="submit" value="Submit" />
        </form>
    );
}

29.您对受控和非受控组件了解多少？

30.什么是高阶成分（HOC）？

高阶组件是重用组件逻辑的高级方法。基本上，这是从React的组成性质衍生的模式。HOC是自定义组件，在其中包裹了另一个组件。他们可以接受任何动态提供的子组件，但不会修改或复制其输入组件中的任何行为。您可以说HOC是“纯”组件。

31.您可以使用HOC做什么？

HOC可用于许多任务，例如：

• 代码重用，逻辑和引导程序抽象

• 渲染高顶升

• 状态抽象和操纵

• 道具操纵

32.什么是纯成分？

纯 组件是可以编写的最简单，最快的组件。它们可以替换仅具有render（）的任何组件 。这些组件增强了代码的简洁性和应用程序的性能。

33. React中按键的意义是什么？

密钥用于标识唯一的虚拟DOM元素及其驱动UI的相应数据。它们通过回收DOM中的所有现有元素来帮助React优化渲染。这些键必须是唯一的数字或字符串，React只能使用这些数字或字符串对元素进行重新排序，而不是重新渲染它们。这导致应用程序性能的提高。

React Redux – React面试问题

34. MVC框架的主要问题是什么？

以下是MVC框架的一些主要问题：

• DOM操作非常昂贵

• 应用程序缓慢且效率低下

• 有大量的内存浪费

• 由于循环依赖性，围绕模型和视图创建了一个复杂的模型

35.解释Flux。

Flux是强制单向数据流的体系结构模式。它控制派生的数据，并使用具有对所有数据的权限的中央存储实现多个组件之间的通信。整个应用程序中的任何数据更新都只能在此处进行。Flux为应用程序提供稳定性并减少运行时错误。

36. 什么是Redux？

Redux是当今市场上最热门的前端开发库之一。它是JavaScript应用程序的可预测状态容器，用于整个应用程序状态管理。用Redux开发的应用程序易于测试，并且可以在表现出一致行为的不同环境中运行。

37. Redux遵循的三个原则是什么？

1. 单一事实来源：整个应用程序的状态存储在单个存储中的对象/状态树中。单一状态树使跟踪随时间变化以及调试或检查应用程序变得更加容易。

2. 状态是只读的：更改状态的唯一方法是触发操作。动作是描述更改的普通JS对象。就像状态是数据的最小表示一样，操作是数据更改的最小表示。

3. 使用纯函数进行更改： 为了指定操作如何转换状态树，您需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

38.您对“唯一的真理源”了解那些？

Redux使用“存储”将应用程序的整个状态存储在一个地方。因此，所有组件的状态都存储在商店中，它们从商店本身接收更新。单一状态树使跟踪随时间变化以及调试或检查应用程序变得更加容易。

39.列出Redux的组件。

Redux由以下组件组成：

1. 行动–这是一个描述发生了什么的对象。

2. 减速器–一个确定状态如何变化的地方。

3. 商店–整个应用程序的状态/对象树保存在商店中。

4. 查看–仅显示商店提供的数据。

40.显示数据如何流过Redux？

等你来回答。

41.在Redux中如何定义动作？

React中的动作必须具有type属性，该属性指示正在执行的ACTION的类型。必须将它们定义为String常量，您也可以为其添加更多属性。在Redux中，使用称为“动作创建者”的功能来创建动作。以下是动作和动作创建者的示例：

function addTodo(text) {
       return {
                type: ADD_TODO,    
                text    
    }
}

42.说明Reducer的作用。

Reducer是纯函数，用于指定应用程序的状态如何响应ACTION进行更改。减速器通过采用先前的状态和操作来工作，然后返回新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新值。如果不需要完成任何工作，它将按原样返回以前的状态。

43.在Redux中存储的意义是什么？

商店是一个JavaScript对象，它可以保存应用程序的状态并提供一些帮助程序方法来访问状态，调度动作和注册侦听器。应用程序的整个状态/对象树保存在单个存储中。因此，Redux非常简单且可预测。我们可以将中间件传递给商店以处理数据处理，并保留更改商店状态的各种操作的日志。所有动作都通过减速器返回新状态。

44. Redux与Flux有何不同？

45. Redux有哪些优势？

Redux的优点如下：

• 结果的可预测性– 由于总是有一个真实的来源，即商店，因此对于如何将当前状态与操作和应用程序的其他部分进行同步没有任何困惑。

• 可维护性–该代码变得易于维护，具有可预测的结果和严格的结构。

• 服务器端渲染– 您只需要将在服务器上创建的存储传递给客户端。这对于初始渲染非常有用，并在优化应用程序性能时提供了更好的用户体验。

• 开发人员工具–从操作到状态更改，开发人员可以实时跟踪应用程序中发生的所有事情。

• 社区和生态系统– Redux在其背后拥有巨大的社区，这使其使用更加引人入胜。大量的才华横溢的社区为图书馆的发展做出了贡献，并开发了各种应用程序。

• 易于测试– Redux的代码主要是小的，纯净的和孤立的功能。这使代码可测试且独立。

• 组织– Redux精确地规定了代码的组织方式，这使得在团队合作时代码更一致，更容易。

React Router – React面试问题

46.什么是React Router？

React Router是一个强大的路由库，建立在React的基础上，可以帮助向应用程序添加新的屏幕和流程。这样可以使URL与网页上显示的数据保持同步。它保持标准化的结构和行为，并用于开发单页Web应用程序。React Router有一个简单的API。

47.为什么 在React Router v4中使用switch关键字？

尽管

用于在路由器内部封装多个路由。当您只想显示几个定义的路径中要渲染的单个路径时，可以使用 “ switch”关键字 。所述<开关> 标签在使用时匹配以在顺序次序中的定义的路由类型化URL。找到第一个匹配项后，它将呈现指定的路线。从而绕过其余 路线。

48.为什么我们在React中需要一个Router？

路由器用于定义多个路由，并且当用户键入特定的URL时，如果此URL与路由器内部定义的任何“路由”的路径匹配，则用户将被重定向到该特定的路由。因此，基本上，我们需要在我们的应用程序中添加一个路由器库，以允许创建多个路由，每个路由都为我们带来一个独特的视图。

<switch>
    <route exact path=&rsquo;/&rsquo;&nbsp;component={Home}/>
    <route path=&rsquo;/posts/:id&rsquo; component={Newpost}/>
    <route path=&rsquo;/posts&rsquo;&nbsp;&nbsp; component={Post}/>
</switch>

49.列出React Router的优点。

几个优点是：

1. 就像React基于组件的方式一样，在React Router v4中，API是‘All About Components’。路由器可以可视化为单个根组件（），其中包含特定的子路由（）。

2. 无需手动设置历史记录值：在React Router v4中，我们要做的就是将路由包装在组件中。

3. 这些软件包被拆分：三个软件包，分别用于Web，Native和Core。这支持了我们应用程序的紧凑尺寸。基于类似的编码样式，很容易切换。

50. React Router与传统路由有何不同？