面試官最有可能問到的 50 個 React 面試題和答案

時間 2019-11-15

原文原文鏈接

若是你是一位有抱負的前端程序員並準備面試，那麼這篇文章很適合你。本文是你學習和麪試 React 所需知識的完美指南。前端

JavaScript 工具緩慢而穩定地在市場中紮根，對 React 的需求呈指數級增加。選擇合適的技術來開發應用或網站變得愈來愈有挑戰性。其中 React 被認爲是增加最快的 Javascript 框架。react

截至今天，Github 上約有1,000名貢獻者。 Virtual DOM 和可重用組件等獨特功能吸引了前端開發人員的注意力。儘管它只是 MVC（模型 - 視圖 - 控制器）中「視圖」的庫，但它對 Angular，Meteor，Vue 等全面的框架也構成了強力的挑戰。下圖爲流行的 JS 框架的趨勢：程序員

React 面試題
如下是面試官最有可能問到的 50 個 React 面試題和答案。爲方便你學習，我對它們進行了分類：面試

基本知識
React 組件
React Redux
React 路由
基本知識瀏覽器

區分Real DOM和Virtual DOM

Real DOM服務器

更新緩慢。
能夠直接更新 HTML。
若是元素更新，則建立新DOM。
DOM操做代價很高。
消耗的內存較多。
Virtual DOM架構

更新更快。
沒法直接更新 HTML。
若是元素更新，則更新 JSX 。
DOM 操做很是簡單。
不多的內存消耗。框架

什麼是React？

React 是 Facebook 在 2011 年開發的前端 JavaScript 庫。
它遵循基於組件的方法，有助於構建可重用的UI組件。
它用於開發複雜和交互式的 Web 和移動 UI。
儘管它僅在 2015 年開源，但有一個很大的支持社區。模塊化

React有什麼特色？

React的主要功能以下：函數

它使用虛擬DOM 而不是真正的DOM。
它能夠進行服務器端渲染。
它遵循單向數據流或數據綁定。

列出React的一些主要優勢。

React的一些主要優勢是：

它提升了應用的性能
能夠方便地在客戶端和服務器端使用
因爲 JSX，代碼的可讀性很好
React 很容易與 Meteor，Angular 等其餘框架集成
使用React，編寫UI測試用例變得很是容易

React有哪些限制？

React的限制以下：

React 只是一個庫，而不是一個完整的框架
它的庫很是龐大，須要時間來理解
新手程序員可能很難理解
編碼變得複雜，由於它使用內聯模板和 JSX

什麼是JSX？

JSX 是J avaScript XML 的簡寫。是 React 使用的一種文件，它利用 JavaScript 的表現力和相似 HTML 的模板語法。這使得 HTML 文件很是容易理解。此文件能使應用很是可靠，並可以提升其性能。下面是JSX的一個例子：

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

你瞭解 Virtual DOM 嗎？解釋一下它的工做原理。

Virtual DOM 是一個輕量級的 JavaScript 對象，它最初只是 real DOM 的副本。它是一個節點樹，它將元素、它們的屬性和內容做爲對象及其屬性。 React 的渲染函數從 React 組件中建立一個節點樹。而後它響應數據模型中的變化來更新該樹，該變化是由用戶或系統完成的各類動做引發的。

Virtual DOM 工做過程有三個簡單的步驟。

每當底層數據發生改變時，整個 UI 都將在 Virtual DOM 描述中從新渲染。

而後計算以前 DOM 表示與新表示的之間的差別。

完成計算後，將只用實際更改的內容更新 real DOM。

爲何瀏覽器沒法讀取JSX？

瀏覽器只能處理 JavaScript 對象，而不能讀取常規 JavaScript 對象中的 JSX。因此爲了使瀏覽器可以讀取 JSX，首先，須要用像 Babel 這樣的 JSX 轉換器將 JSX 文件轉換爲 JavaScript 對象，而後再將其傳給瀏覽器。

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

React與Angular有何不一樣？

React 組件

你怎樣理解「在React中，一切都是組件」這句話。

組件是 React 應用 UI 的構建塊。這些組件將整個 UI 分紅小的獨立並可重用的部分。每一個組件彼此獨立，而不會影響 UI 的其他部分。

怎樣解釋 React 中 render() 的目的。

每一個React組件強制要求必須有一個 render()。它返回一個 React 元素，是原生 DOM 組件的表示。若是須要渲染多個 HTML 元素，則必須將它們組合在一個封閉標記內，例如 <form>、<group>、<div> 等。此函數必須保持純淨，即必須每次調用時都返回相同的結果。

如何將兩個或多個組件嵌入到一個組件中？

能夠經過如下方式將組件嵌入到一個組件中：

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')
);

什麼是 Props?

Props 是 React 中屬性的簡寫。它們是隻讀組件，必須保持純，即不可變。它們老是在整個應用中從父組件傳遞到子組件。子組件永遠不能將 prop 送回父組件。這有助於維護單向數據流，一般用於呈現動態生成的數據。

React中的狀態是什麼？它是如何使用的？

狀態是 React 組件的核心，是數據的來源，必須儘量簡單。基本上狀態是肯定組件呈現和行爲的對象。與props 不一樣，它們是可變的，並建立動態和交互式組件。能夠經過 this.state() 訪問它們。

區分狀態和 props
如何更新組件的狀態？

能夠用 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')
);

React 中的箭頭函數是什麼？怎麼用？

箭頭函數（=>）是用於編寫函數表達式的簡短語法。這些函數容許正確綁定組件的上下文，由於在 ES6 中默認下不能使用自動綁定。使用高階函數時，箭頭函數很是有用。

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

區分有狀態和無狀態組件。
React組件生命週期的階段是什麼？

React 組件的生命週期有三個不一樣的階段：

初始渲染階段：這是組件即將開始其生命之旅並進入 DOM 的階段。
更新階段：一旦組件被添加到 DOM，它只有在 prop 或狀態發生變化時纔可能更新和從新渲染。這些只發生在這個階段。
卸載階段：這是組件生命週期的最後階段，組件被銷燬並從 DOM 中刪除。

詳細解釋 React 組件的生命週期方法。

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

componentWillMount() – 在渲染以前執行，在客戶端和服務器端都會執行。
componentDidMount() – 僅在第一次渲染後在客戶端執行。
componentWillReceiveProps() – 當從父類接收到 props 而且在調用另外一個渲染器以前調用。
shouldComponentUpdate() – 根據特定條件返回 true 或 false。若是你但願更新組件，請返回true 不然返回 false。默認狀況下，它返回 false。
componentWillUpdate() – 在 DOM 中進行渲染以前調用。
componentDidUpdate() – 在渲染髮生後當即調用。
componentWillUnmount() – 從 DOM 卸載組件後調用。用於清理內存空間。

React中的事件是什麼？

在 React 中，事件是對鼠標懸停、鼠標單擊、按鍵等特定操做的觸發反應。處理這些事件相似於處理 DOM 元素中的事件。可是有一些語法差別，如：

用駝峯命名法對事件命名而不是僅使用小寫字母。
事件做爲函數而不是字符串傳遞。
事件參數重包含一組特定於事件的屬性。每一個事件類型都包含本身的屬性和行爲，只能經過其事件處理程序訪問。

如何在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>
    );    
}

});

React中的合成事件是什麼？

合成事件是圍繞瀏覽器原生事件充當跨瀏覽器包裝器的對象。它們將不一樣瀏覽器的行爲合併爲一個 API。這樣作是爲了確保事件在不一樣瀏覽器中顯示一致的屬性。

你對 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(        
          <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>
    );
   }
 }

列出一些應該使用 Refs 的狀況。

如下是應該使用 refs 的狀況：

須要管理焦點、選擇文本或媒體播放時
觸發式動畫
與第三方 DOM 庫集成

如何模塊化 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>       
        );  
    }
}

如何在 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>
    );
}

你對受控組件和非受控組件瞭解多少？
什麼是高階組件（HOC）？

高階組件是重用組件邏輯的高級方法，是一種源於 React 的組件模式。 HOC 是自定義組件，在它以內包含另外一個組件。它們能夠接受子組件提供的任何動態，但不會修改或複製其輸入組件中的任何行爲。你能夠認爲 HOC 是「純（Pure）」組件。

你能用HOC作什麼？

HOC可用於許多任務，例如：

代碼重用，邏輯和引導抽象
渲染劫持
狀態抽象和控制
Props 控制

什麼是純組件？

純（Pure）組件是能夠編寫的最簡單、最快的組件。它們能夠替換任何只有 render() 的組件。這些組件加強了代碼的簡單性和應用的性能。

React 中 key 的重要性是什麼？

key 用於識別惟一的 Virtual DOM 元素及其驅動 UI 的相應數據。它們經過回收 DOM 中當前全部的元素來幫助 React 優化渲染。這些 key 必須是惟一的數字或字符串，React 只是從新排序元素而不是從新渲染它們。這能夠提升應用程序的性能。

React Redux

MVC框架的主要問題是什麼？

如下是MVC框架的一些主要問題：

對 DOM 操做的代價很是高
程序運行緩慢且效率低下
內存浪費嚴重
因爲循環依賴性，組件模型須要圍繞 models 和 views 進行建立

解釋一下 Flux

Flux 是一種強制單向數據流的架構模式。它控制派生數據，並使用具備全部數據權限的中心 store 實現多個組件之間的通訊。整個應用中的數據更新必須只能在此處進行。 Flux 爲應用提供穩定性並減小運行時的錯誤。

什麼是Redux？

Redux 是當今最熱門的前端開發庫之一。它是 JavaScript 程序的可預測狀態容器，用於整個應用的狀態管理。使用 Redux 開發的應用易於測試，能夠在不一樣環境中運行，並顯示一致的行爲。

Redux遵循的三個原則是什麼？

單一事實來源：整個應用的狀態存儲在單個 store 中的對象/狀態樹裏。單一狀態樹能夠更容易地跟蹤隨時間的變化，並調試或檢查應用程序。

狀態是隻讀的：改變狀態的惟一方法是去觸發一個動做。動做是描述變化的普通 JS 對象。就像 state 是數據的最小表示同樣，該操做是對數據更改的最小表示。

使用純函數進行更改：爲了指定狀態樹如何經過操做進行轉換，你須要純函數。純函數是那些返回值僅取決於其參數值的函數。

你對「單一事實來源」有什麼理解？

Redux 使用「Store」將程序的整個狀態存儲在同一個地方。所以全部組件的狀態都存儲在 Store 中，而且它們從 Store 自己接收更新。單一狀態樹能夠更容易地跟蹤隨時間的變化，並調試或檢查程序。

列出 Redux 的組件。

Redux 由如下組件組成：

Action – 這是一個用來描述發生了什麼事情的對象。
Reducer – 這是一個肯定狀態將如何變化的地方。
Store – 整個程序的狀態/對象樹保存在Store中。
View – 只顯示 Store 提供的數據。

數據如何經過 Redux 流動？
如何在 Redux 中定義 Action？

React 中的 Action 必須具備 type 屬性，該屬性指示正在執行的 ACTION 的類型。必須將它們定義爲字符串常量，而且還能夠向其添加更多的屬性。在 Redux 中，action 被名爲 Action Creators 的函數所建立。如下是 Action 和Action Creator 的示例：

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

解釋 Reducer 的做用。

Reducers 是純函數，它規定應用程序的狀態怎樣因響應 ACTION 而改變。Reducers 經過接受先前的狀態和 action 來工做，而後它返回一個新的狀態。它根據操做的類型肯定須要執行哪一種更新，而後返回新的值。若是不須要完成任務，它會返回原來的狀態。

Store 在 Redux 中的意義是什麼？

Store 是一個 JavaScript 對象，它能夠保存程序的狀態，並提供一些方法來訪問狀態、調度操做和註冊偵聽器。應用程序的整個狀態/對象樹保存在單一存儲中。所以，Redux 很是簡單且是可預測的。咱們能夠將中間件傳遞到 store 來處理數據，並記錄改變存儲狀態的各類操做。全部操做都經過 reducer 返回一個新狀態。

Redux與Flux有何不一樣？
Redux 有哪些優勢？

Redux 的優勢以下：

結果的可預測性 - 因爲老是存在一個真實來源，即 store ，所以不存在如何將當前狀態與動做和應用的其餘部分同步的問題。
可維護性 - 代碼變得更容易維護，具備可預測的結果和嚴格的結構。
服務器端渲染 - 你只需將服務器上建立的 store 傳到客戶端便可。這對初始渲染很是有用，而且能夠優化應用性能，從而提供更好的用戶體驗。
開發人員工具 - 從操做到狀態更改，開發人員能夠實時跟蹤應用中發生的全部事情。
社區和生態系統 - Redux 背後有一個巨大的社區，這使得它更加迷人。一個由才華橫溢的人組成的大型社區爲庫的改進作出了貢獻，並開發了各類應用。
易於測試 - Redux 的代碼主要是小巧、純粹和獨立的功能。這使代碼可測試且獨立。
組織 - Redux 準確地說明了代碼的組織方式，這使得代碼在團隊使用時更加一致和簡單。

React 路由

什麼是React 路由？

React 路由是一個構建在 React 之上的強大的路由庫，它有助於嚮應用程序添加新的屏幕和流。這使 URL 與網頁上顯示的數據保持同步。它負責維護標準化的結構和行爲，並用於開發單頁 Web 應用。 React 路由有一個簡單的API。

爲何React Router v4中使用 switch 關鍵字？

雖然 <div> 用於封裝 Router 中的多個路由，當你想要僅顯示要在多個定義的路線中呈現的單個路線時，可使用「switch」關鍵字。使用時，<switch> 標記會按順序將已定義的 URL 與已定義的路由進行匹配。找到第一個匹配項後，它將渲染指定的路徑。從而繞過其它路線。

爲何須要 React 中的路由？

Router 用於定義多個路由，當用戶定義特定的 URL 時，若是此 URL 與 Router 內定義的任何「路由」的路徑匹配，則用戶將重定向到該特定路由。因此基本上咱們須要在本身的應用中添加一個 Router 庫，容許建立多個路由，每一個路由都會向咱們提供一個獨特的視圖

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

列出 React Router 的優勢。

幾個優勢是：

就像 React 基於組件同樣，在 React Router v4 中，API 是 'All About Components'。能夠將 Router 可視化爲單個根組件（<BrowserRouter>），其中咱們將特定的子路由（<route>）包起來。
無需手動設置歷史值：在 React Router v4 中，咱們要作的就是將路由包裝在 <BrowserRouter> 組件中。
包是分開的：共有三個包，分別用於 Web、Native 和 Core。這使咱們應用更加緊湊。基於相似的編碼風格很容易進行切換。