有哪些必知必会的React面试题

有哪些必知必会的React面试题？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联技术团队10多年来致力于为客户提供成都网站设计、成都网站制作、成都品牌网站建设、成都全网营销、搜索引擎SEO优化等服务。经过多年发展，公司拥有经验丰富的技术团队，先后服务、推广了1000+网站，包括各类中小企业、企事单位、高校等机构单位。

JavaScript 工具缓慢而稳定地在市场中扎根，对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性。其中 React 被认为是增长最快的 Javascript 框架。

截至今天，Github 上约有1,000名贡献者。 Virtual DOM 和可重用组件等独特功能吸引了前端开发人员的注意力。尽管它只是 MVC（模型 - 视图 - 控制器）中“视图”的库，但它对 Angular，Meteor，Vue 等全面的框架也构成了强力的挑战。下图为流行的 JS 框架的趋势：

JS 框架的趋势

React 面试题

以下是面试官最有可能问到的 50 个 React 面试题和答案。为方便你学习，我对它们进行了分类：

• 基本知识
• React 组件
• React Redux
• React 路由

基本知识

1. 区分Real DOM和Virtual 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 是J avaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能。下面是JSX的一个例子：

render(){
    return(        
        

            
 Hello World from Edureka!!
        

    );
}

7. 你了解 Virtual DOM 吗？解释一下它的工作原理。

Virtual DOM 是一个轻量级的 JavaScript 对象，它最初只是 real DOM 的副本。它是一个节点树，它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树，该变化是由用户或系统完成的各种动作引起的。

Virtual DOM 工作过程有三个简单的步骤。

1.每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。

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

3.完成计算后，将只用实际更改的内容更新 real DOM。

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

浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器。

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

以下语法是 ES5 与 ES6 中的区别：

1.require 与 import

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

2.export 与 exports

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

3.component 和 function

// ES5
var MyComponent = React.createClass({
    render: function() {
        return
            
Hello Edureka!
;
    }
});
 
// ES6
class MyComponent extends React.Component {
    render() {
        return
            
Hello Edureka!
;
    }
}

4.props

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

5.state

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

10. React与Angular有何不同？

React 组件

11. 你怎样理解“在React中，一切都是组件”这句话。

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

12. 怎样解释 React 中 render() 的目的。

每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如

class MyComponent extends React.Component{
    render(){
        return(          
            

                
Hello
                

            

        );
    }
}
class Header extends React.Component{
    render(){
        return
            
Header Component
   
   };
}
ReactDOM.render(
    , document.getElementById('content')
);

class MyComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'Maxx',
            id: '101'
        }
    }
    render()
        {
            setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
            return (              
                

                    
Hello {this.state.name}
                    
Your Id is {this.state.id}
                

            );
        }
    }
ReactDOM.render(
    , document.getElementById('content')
);

//General way
render() {    
    return(
        
    );
}
//With Arrow Function
render() {  
    return(
        this.handleOnChange(e) } />
    );
}

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

class ReferenceDemo extends React.Component{
     display() {
         const name = this.inputDemo.value;
         document.getElementById('disp').innerHTML = name;
     }
render() {
    return(        
          

            Name:  this.inputDemo = input} />
            Click            
            
Hello  !!!
          

    );
   }
 }

//ChildComponent.jsx
export default class ChildComponent extends React.Component {
    render() {
        return(           
              

                  
This is a child component
              

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

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

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

30.  什么是高阶组件（HOC）？

高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件。

31. 你能用HOC做什么？

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

• 代码重用，逻辑和引导抽象
• 渲染劫持
• 状态抽象和控制
• Props 控制

32. 什么是纯组件？

纯（Pure） 组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render()的组件。这些组件增强了代码的简单性和应用的性能。

33. React 中 key 的重要性是什么？

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

React Redux

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

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

• 对 DOM 操作的代价非常高
• 程序运行缓慢且效率低下
• 内存浪费严重
• 由于循环依赖性，组件模型需要围绕 models 和 views 进行创建

35. 解释一下 Flux

Flux 是一种强制单向数据流的架构模式。它控制派生数据，并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。

36. 什么是Redux？

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

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

1. 单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。
2. 状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。
3. 使用纯函数进行更改：为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

38. 你对“单一事实来源”有什么理解？

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

39. 列出 Redux 的组件。

Redux 由以下组件组成：

1. Action– 这是一个用来描述发生了什么事情的对象。
2. Reducer–  这是一个确定状态将如何变化的地方。
3. Store– 整个程序的状态/对象树保存在Store中。
4. View– 只显示 Store 提供的数据。

40. 数据如何通过 Redux 流动？

41. 如何在 Redux 中定义 Action？

React 中的 Action 必须具有 type 属性，该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。在 Redux 中，action 被名为 Action Creators 的函数所创建。以下是 Action 和Action Creator 的示例：

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

42. 解释 Reducer 的作用。

Reducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态。

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

Store 是一个 JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。

44.  Redux与Flux有何不同？

45. Redux 有哪些优点？

Redux 的优点如下：

• 结果的可预测性 - 由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。
• 可维护性 - 代码变得更容易维护，具有可预测的结果和严格的结构。
• 服务器端渲染 - 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。
• 开发人员工具 - 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。
• 社区和生态系统 - Redux 背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。
• 易于测试 - Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。
• 组织 - Redux 准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单。

React 路由

46. 什么是React 路由？

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

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

虽然

用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用 “switch” 关键字。使用时， 标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其它路线。

48. 为什么需要 React 中的路由？

Router 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配，则用户将重定向到该特定路由。所以基本上我们需要在自己的应用中添加一个 Router 库，允许创建多个路由，每个路由都会向我们提供一个独特的视图

49. 列出 React Router 的优点。

几个优点是：

1. 就像 React 基于组件一样，在 React Router v4 中，API 是 'All About Components'。可以将 Router 可视化为单个根组件（），其中我们将特定的子路由（）包起来。
2. 无需手动设置历史值：在 React Router v4 中，我们要做的就是将路由包装在 组件中。
3. 包是分开的：共有三个包，分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换。

50. React Router与常规路由有何不同？

希望这套 React 面试题和答案能帮你准备面试。祝一切顺利

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。