有哪些必知必會(huì)的React面試題？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)技術(shù)團(tuán)隊(duì)10多年來(lái)致力于為客戶提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、成都品牌網(wǎng)站建設(shè)、成都全網(wǎng)營(yíng)銷、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過(guò)多年發(fā)展，公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了1000+網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。

JavaScript 工具緩慢而穩(wěn)定地在市場(chǎng)中扎根，對(duì) React 的需求呈指數(shù)級(jí)增長(zhǎng)。選擇合適的技術(shù)來(lái)開(kāi)發(fā)應(yīng)用或網(wǎng)站變得越來(lái)越有挑戰(zhàn)性。其中 React 被認(rèn)為是增長(zhǎng)最快的 Javascript 框架。

截至今天，Github 上約有1,000名貢獻(xiàn)者。 Virtual DOM 和可重用組件等獨(dú)特功能吸引了前端開(kāi)發(fā)人員的注意力。盡管它只是 MVC（模型 - 視圖 - 控制器）中“視圖”的庫(kù)，但它對(duì) Angular，Meteor，Vue 等全面的框架也構(gòu)成了強(qiáng)力的挑戰(zhàn)。下圖為流行的 JS 框架的趨勢(shì)：

JS 框架的趨勢(shì)

React 面試題

以下是面試官最有可能問(wèn)到的 50 個(gè) React 面試題和答案。為方便你學(xué)習(xí)，我對(duì)它們進(jìn)行了分類：

• 基本知識(shí)
• React 組件
• React Redux
• React 路由

基本知識(shí)

1. 區(qū)分Real DOM和Virtual DOM

2. 什么是React？

• React 是 Facebook 在 2011 年開(kāi)發(fā)的前端 JavaScript 庫(kù)。
• 它遵循基于組件的方法，有助于構(gòu)建可重用的UI組件。
• 它用于開(kāi)發(fā)復(fù)雜和交互式的 Web 和移動(dòng) UI。
• 盡管它僅在 2015 年開(kāi)源，但有一個(gè)很大的支持社區(qū)。

3. React有什么特點(diǎn)？

React的主要功能如下：

1. 它使用虛擬DOM而不是真正的DOM。
2. 它可以進(jìn)行服務(wù)器端渲染。
3. 它遵循單向數(shù)據(jù)流或數(shù)據(jù)綁定。

4. 列出React的一些主要優(yōu)點(diǎn)。

React的一些主要優(yōu)點(diǎn)是：

1. 它提高了應(yīng)用的性能
2. 可以方便地在客戶端和服務(wù)器端使用
3. 由于 JSX，代碼的可讀性很好
4. React 很容易與 Meteor，Angular 等其他框架集成
5. 使用React，編寫UI測(cè)試用例變得非常容易

5. React有哪些限制？

React的限制如下：

1. React 只是一個(gè)庫(kù)，而不是一個(gè)完整的框架
2. 它的庫(kù)非常龐大，需要時(shí)間來(lái)理解
3. 新手程序員可能很難理解
4. 編碼變得復(fù)雜，因?yàn)樗褂脙?nèi)聯(lián)模板和 JSX

6. 什么是JSX？

JSX 是J avaScript XML 的簡(jiǎn)寫。是 React 使用的一種文件，它利用 JavaScript 的表現(xiàn)力和類似 HTML 的模板語(yǔ)法。這使得 HTML 文件非常容易理解。此文件能使應(yīng)用非常可靠，并能夠提高其性能。下面是JSX的一個(gè)例子：

render(){
    return(        
        

            
 Hello World from Edureka!!
        

    );
}

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

Virtual DOM 是一個(gè)輕量級(jí)的 JavaScript 對(duì)象，它最初只是 real DOM 的副本。它是一個(gè)節(jié)點(diǎn)樹(shù)，它將元素、它們的屬性和內(nèi)容作為對(duì)象及其屬性。 React 的渲染函數(shù)從 React 組件中創(chuàng)建一個(gè)節(jié)點(diǎn)樹(shù)。然后它響應(yīng)數(shù)據(jù)模型中的變化來(lái)更新該樹(shù)，該變化是由用戶或系統(tǒng)完成的各種動(dòng)作引起的。

Virtual DOM 工作過(guò)程有三個(gè)簡(jiǎn)單的步驟。

1.每當(dāng)?shù)讓訑?shù)據(jù)發(fā)生改變時(shí)，整個(gè) UI 都將在 Virtual DOM 描述中重新渲染。

2.然后計(jì)算之前 DOM 表示與新表示的之間的差異。

3.完成計(jì)算后，將只用實(shí)際更改的內(nèi)容更新 real DOM。

8. 為什么瀏覽器無(wú)法讀取JSX？

瀏覽器只能處理 JavaScript 對(duì)象，而不能讀取常規(guī) JavaScript 對(duì)象中的 JSX。所以為了使瀏覽器能夠讀取 JSX，首先，需要用像 Babel 這樣的 JSX 轉(zhuǎn)換器將 JSX 文件轉(zhuǎn)換為 JavaScript 對(duì)象，然后再將其傳給瀏覽器。

9. 與 ES5 相比，React 的 ES6 語(yǔ)法有何不同？

以下語(yǔ)法是 ES5 與 ES6 中的區(qū)別：

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 應(yīng)用 UI 的構(gòu)建塊。這些組件將整個(gè) UI 分成小的獨(dú)立并可重用的部分。每個(gè)組件彼此獨(dú)立，而不會(huì)影響 UI 的其余部分。

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

每個(gè)React組件強(qiáng)制要求必須有一個(gè) render()。它返回一個(gè) React 元素，是原生 DOM 組件的表示。如果需要渲染多個(gè) HTML 元素，則必須將它們組合在一個(gè)封閉標(biāo)記內(nèi)，例如

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. 你對(duì)受控組件和非受控組件了解多少？

30.  什么是高階組件（HOC）？

高階組件是重用組件邏輯的高級(jí)方法，是一種源于 React 的組件模式。 HOC 是自定義組件，在它之內(nèi)包含另一個(gè)組件。它們可以接受子組件提供的任何動(dòng)態(tài)，但不會(huì)修改或復(fù)制其輸入組件中的任何行為。你可以認(rèn)為 HOC 是“純（Pure）”組件。

31. 你能用HOC做什么？

HOC可用于許多任務(wù)，例如：

• 代碼重用，邏輯和引導(dǎo)抽象
• 渲染劫持
• 狀態(tài)抽象和控制
• Props 控制

32. 什么是純組件？

純（Pure） 組件是可以編寫的最簡(jiǎn)單、最快的組件。它們可以替換任何只有 render()的組件。這些組件增強(qiáng)了代碼的簡(jiǎn)單性和應(yīng)用的性能。

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

key 用于識(shí)別唯一的 Virtual DOM 元素及其驅(qū)動(dòng) UI 的相應(yīng)數(shù)據(jù)。它們通過(guò)回收 DOM 中當(dāng)前所有的元素來(lái)幫助 React 優(yōu)化渲染。這些 key 必須是唯一的數(shù)字或字符串，React 只是重新排序元素而不是重新渲染它們。這可以提高應(yīng)用程序的性能。

React Redux

34. MVC框架的主要問(wèn)題是什么？

以下是MVC框架的一些主要問(wèn)題：

• 對(duì) DOM 操作的代價(jià)非常高
• 程序運(yùn)行緩慢且效率低下
• 內(nèi)存浪費(fèi)嚴(yán)重
• 由于循環(huán)依賴性，組件模型需要圍繞 models 和 views 進(jìn)行創(chuàng)建

35. 解釋一下 Flux

Flux 是一種強(qiáng)制單向數(shù)據(jù)流的架構(gòu)模式。它控制派生數(shù)據(jù)，并使用具有所有數(shù)據(jù)權(quán)限的中心 store 實(shí)現(xiàn)多個(gè)組件之間的通信。整個(gè)應(yīng)用中的數(shù)據(jù)更新必須只能在此處進(jìn)行。 Flux 為應(yīng)用提供穩(wěn)定性并減少運(yùn)行時(shí)的錯(cuò)誤。

36. 什么是Redux？

Redux 是當(dāng)今最熱門的前端開(kāi)發(fā)庫(kù)之一。它是 JavaScript 程序的可預(yù)測(cè)狀態(tài)容器，用于整個(gè)應(yīng)用的狀態(tài)管理。使用 Redux 開(kāi)發(fā)的應(yīng)用易于測(cè)試，可以在不同環(huán)境中運(yùn)行，并顯示一致的行為。

37. Redux遵循的三個(gè)原則是什么？

1. 單一事實(shí)來(lái)源：整個(gè)應(yīng)用的狀態(tài)存儲(chǔ)在單個(gè) store 中的對(duì)象/狀態(tài)樹(shù)里。單一狀態(tài)樹(shù)可以更容易地跟蹤隨時(shí)間的變化，并調(diào)試或檢查應(yīng)用程序。
2. 狀態(tài)是只讀的：改變狀態(tài)的唯一方法是去觸發(fā)一個(gè)動(dòng)作。動(dòng)作是描述變化的普通 JS 對(duì)象。就像 state 是數(shù)據(jù)的最小表示一樣，該操作是對(duì)數(shù)據(jù)更改的最小表示。
3. 使用純函數(shù)進(jìn)行更改：為了指定狀態(tài)樹(shù)如何通過(guò)操作進(jìn)行轉(zhuǎn)換，你需要純函數(shù)。純函數(shù)是那些返回值僅取決于其參數(shù)值的函數(shù)。

38. 你對(duì)“單一事實(shí)來(lái)源”有什么理解？

Redux 使用 “Store” 將程序的整個(gè)狀態(tài)存儲(chǔ)在同一個(gè)地方。因此所有組件的狀態(tài)都存儲(chǔ)在 Store 中，并且它們從 Store 本身接收更新。單一狀態(tài)樹(shù)可以更容易地跟蹤隨時(shí)間的變化，并調(diào)試或檢查程序。

39. 列出 Redux 的組件。

Redux 由以下組件組成：

1. Action– 這是一個(gè)用來(lái)描述發(fā)生了什么事情的對(duì)象。
2. Reducer–  這是一個(gè)確定狀態(tài)將如何變化的地方。
3. Store– 整個(gè)程序的狀態(tài)/對(duì)象樹(shù)保存在Store中。
4. View– 只顯示 Store 提供的數(shù)據(jù)。

40. 數(shù)據(jù)如何通過(guò) Redux 流動(dòng)？

41. 如何在 Redux 中定義 Action？

React 中的 Action 必須具有 type 屬性，該屬性指示正在執(zhí)行的 ACTION 的類型。必須將它們定義為字符串常量，并且還可以向其添加更多的屬性。在 Redux 中，action 被名為 Action Creators 的函數(shù)所創(chuàng)建。以下是 Action 和Action Creator 的示例：

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

42. 解釋 Reducer 的作用。

Reducers 是純函數(shù)，它規(guī)定應(yīng)用程序的狀態(tài)怎樣因響應(yīng) ACTION 而改變。Reducers 通過(guò)接受先前的狀態(tài)和 action 來(lái)工作，然后它返回一個(gè)新的狀態(tài)。它根據(jù)操作的類型確定需要執(zhí)行哪種更新，然后返回新的值。如果不需要完成任務(wù)，它會(huì)返回原來(lái)的狀態(tài)。

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

Store 是一個(gè) JavaScript 對(duì)象，它可以保存程序的狀態(tài)，并提供一些方法來(lái)訪問(wèn)狀態(tài)、調(diào)度操作和注冊(cè)偵聽(tīng)器。應(yīng)用程序的整個(gè)狀態(tài)/對(duì)象樹(shù)保存在單一存儲(chǔ)中。因此，Redux 非常簡(jiǎn)單且是可預(yù)測(cè)的。我們可以將中間件傳遞到 store 來(lái)處理數(shù)據(jù)，并記錄改變存儲(chǔ)狀態(tài)的各種操作。所有操作都通過(guò) reducer 返回一個(gè)新?tīng)顟B(tài)。

44.  Redux與Flux有何不同？

45. Redux 有哪些優(yōu)點(diǎn)？

Redux 的優(yōu)點(diǎn)如下：

• 結(jié)果的可預(yù)測(cè)性 - 由于總是存在一個(gè)真實(shí)來(lái)源，即 store ，因此不存在如何將當(dāng)前狀態(tài)與動(dòng)作和應(yīng)用的其他部分同步的問(wèn)題。
• 可維護(hù)性 - 代碼變得更容易維護(hù)，具有可預(yù)測(cè)的結(jié)果和嚴(yán)格的結(jié)構(gòu)。
• 服務(wù)器端渲染 - 你只需將服務(wù)器上創(chuàng)建的 store 傳到客戶端即可。這對(duì)初始渲染非常有用，并且可以優(yōu)化應(yīng)用性能，從而提供更好的用戶體驗(yàn)。
• 開(kāi)發(fā)人員工具 - 從操作到狀態(tài)更改，開(kāi)發(fā)人員可以實(shí)時(shí)跟蹤應(yīng)用中發(fā)生的所有事情。
• 社區(qū)和生態(tài)系統(tǒng) - Redux 背后有一個(gè)巨大的社區(qū)，這使得它更加迷人。一個(gè)由才華橫溢的人組成的大型社區(qū)為庫(kù)的改進(jìn)做出了貢獻(xiàn)，并開(kāi)發(fā)了各種應(yīng)用。
• 易于測(cè)試 - Redux 的代碼主要是小巧、純粹和獨(dú)立的功能。這使代碼可測(cè)試且獨(dú)立。
• 組織 - Redux 準(zhǔn)確地說(shuō)明了代碼的組織方式，這使得代碼在團(tuán)隊(duì)使用時(shí)更加一致和簡(jiǎn)單。

React 路由

46. 什么是React 路由？

React 路由是一個(gè)構(gòu)建在 React 之上的強(qiáng)大的路由庫(kù)，它有助于向應(yīng)用程序添加新的屏幕和流。這使 URL 與網(wǎng)頁(yè)上顯示的數(shù)據(jù)保持同步。它負(fù)責(zé)維護(hù)標(biāo)準(zhǔn)化的結(jié)構(gòu)和行為，并用于開(kāi)發(fā)單頁(yè) Web 應(yīng)用。 React 路由有一個(gè)簡(jiǎn)單的API。

47. 為什么React Router v4中使用 switch 關(guān)鍵字 ？

雖然

用于封裝 Router 中的多個(gè)路由，當(dāng)你想要僅顯示要在多個(gè)定義的路線中呈現(xiàn)的單個(gè)路線時(shí)，可以使用 “switch” 關(guān)鍵字。使用時(shí)， 標(biāo)記會(huì)按順序?qū)⒁讯x的 URL 與已定義的路由進(jìn)行匹配。找到第一個(gè)匹配項(xiàng)后，它將渲染指定的路徑。從而繞過(guò)其它路線。

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

Router 用于定義多個(gè)路由，當(dāng)用戶定義特定的 URL 時(shí)，如果此 URL 與 Router 內(nèi)定義的任何 “路由” 的路徑匹配，則用戶將重定向到該特定路由。所以基本上我們需要在自己的應(yīng)用中添加一個(gè) Router 庫(kù)，允許創(chuàng)建多個(gè)路由，每個(gè)路由都會(huì)向我們提供一個(gè)獨(dú)特的視圖

49. 列出 React Router 的優(yōu)點(diǎn)。

幾個(gè)優(yōu)點(diǎn)是：

1. 就像 React 基于組件一樣，在 React Router v4 中，API 是 'All About Components'。可以將 Router 可視化為單個(gè)根組件（），其中我們將特定的子路由（）包起來(lái)。
2. 無(wú)需手動(dòng)設(shè)置歷史值：在 React Router v4 中，我們要做的就是將路由包裝在 組件中。
3. 包是分開(kāi)的：共有三個(gè)包，分別用于 Web、Native 和 Core。這使我們應(yīng)用更加緊湊?；陬愃频木幋a風(fēng)格很容易進(jìn)行切換。

50. React Router與常規(guī)路由有何不同？

希望這套 React 面試題和答案能幫你準(zhǔn)備面試。祝一切順利

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。