50个必知必会的React面试题

假如你是一位有抱负的前端程序员并预备面试，那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完善指南。

【相关专题引荐：react面试题（2020）】

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(        
        <p>
            <h1> Hello World from Edureka!!</h1>
        </p>
    );
}

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
            <h3>Hello Edureka!</h3>;
    }
});
 
// ES6
class MyComponent extends React.Component {
    render() {
        return
            <h3>Hello Edureka!</h3>;
    }
}

4.props

// 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.state

// ES5
var App = React.createClass({
    getInitialState: function() {
        return { name: 'world' };
    },
    render: function() {
        return
            <h3>Hello, {this.state.name}!</h3>;
    }
});

// ES6
class App extends React.Component {
    constructor() {
        super();
        this.state = { name: 'world' };
    }
    render() {
        return
            <h3>Hello, {this.state.name}!</h3>;
    }
}

10. React与Angular有何不一样？

React 组件

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

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

12. 怎样说明 React 中 render() 的目的。

每个React组件强迫要求必需有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。假如需要渲染多个 HTML 元素，则必需将它们组合在一个封闭标志内，例如 <form>、<group>、<p> 等。此函数必需保持纯洁，即必需每次调取时都返回雷同的结果。

13. 怎样将两个或多个组件嵌入到一个组件中？

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

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

14. 什么是 Props?

Props 是 React 中属性的简写。它们是只读组件，必需保持纯，即不成变。它们总是在整个利用中从父组件传递到子组件。子组件永久不克不及将 prop 送回父组件。这有助于保护单向数据流，平常用于显现动态生成的数据。

15. React中的状态是啥？它是怎样使用的？

状态是 React 组件的中心，是数据的来源，必需尽大概简便。根本上状态是肯定组件显现和行动的对象。与props 不一样，它们是可变的，并创立动态和交互式组件。可以通过 this.state() 拜访它们。

16. 区分状态和 props

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 (              
                <p>
                    <h1>Hello {this.state.name}</h1>
                    <h2>Your Id is {this.state.id}</h2>
                </p>
            );
        }
    }
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，它只要在 prop 或状态发生转变时才大概更新和从新渲染。这些只发生在这个阶段。
3. 卸载阶段：这是组件生命周期的最后阶段，组件被烧毁并从 DOM 中删除。

21. 具体说明 React 组件的生命周期办法。

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

1. componentWillMount() – 在渲染此前施行，在客户端和效劳器端都会施行。
2. componentDidMount() – 仅在第一次渲染后在客户端施行。
3. componentWillReceiveProps() – 当从父类接收到 props 并且在调取另一个渲染器此前调取。
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 p with an onClick prop (value is a function)        
        return (            
            <p onClick={this.show}>Click Me!</p>
        );    
    }
});

24. React中的合成事件是啥？

合成事件是环绕阅读器原生事件充当跨阅读器包装器的对象。它们将不一样阅读器的行动合并为一个 API。这样做是为了确保事件在不一样阅读器中显示一致的属性。

25. 你对 React 的 refs 有什么理解？

Refs 是 React 中援用的简写。它是一个有助于储备对特定的 React 元素或组件的援用的属性，它将由组件渲染配置函数返回。用于对 render() 返回的特定元素或组件的援用。当需要停止 DOM 测量或向组件增加办法时，它们会派上用处。

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

26. 列出一些应当使用 Refs 的状况。

以下是应当使用 refs 的状况：

• 需要治理焦点、选中文本或媒体播放时
• 触发式动画
• 与第三方 DOM 库集成

27. 怎样模块化 React 中的代码？

可以使用 export 和 import 属性来模块化代码。它们有助于在不一样的文件中独自编写组件。

//ChildComponent.jsx
export default class ChildComponent extends React.Component {
    render() {
        return(           
              <p>
                  <h1>This is a child component</h1>
              </p>
        );
    }
}
 
//ParentComponent.jsx
import ChildComponent from './childcomponent.js';
class ParentComponent extends React.Component {    
    render() {        
        return(           
             <p>               
                <App />          
             </p>       
        );  
    }
}

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 是“纯（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 关键字 ？

虽然 <p> 用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的道路中显现的单个道路时，可以使用 “switch” 关键字。使用时，<switch> 标志会按次序将已定义的 URL 与已定义的路由停止匹配。寻到第一个匹配项后，它将渲染指定的途径。从而绕过其它道路。

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

Router 用于定义多个路由，当会员定义特定的 URL 时，假如此 URL 与 Router 内定义的任何 “路由” 的途径匹配，则会员将重定向到该特定路由。所以根本上我们需要在本人的利用中增加一个 Router 库，同意创立多个路由，每个路由都会向我们供给一个奇特的视图

<switch>
    <route exact path=’/’ component={Home}/>
    <route path=’/posts/:id’ component={Newpost}/>
    <route path=’/posts’   component={Post}/>
</switch>

49. 列出 React Router 的长处。

几个长处是：

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

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

但愿这套 React 面试题和答案能帮你预备面试。祝一切顺利！

相关教程引荐：React视频教程

以上就是50个必知必会的React面试题的具体内容，更多请关注百分百源码网其它相关文章！