新聞中心
如果你是一位有抱負的前端程序員并準備面試,那么這篇文章很適合你。本文是你學習和面試 React 所需知識的***指南。

JavaScript 工具緩慢而穩(wěn)定地在市場中扎根,對 React 的需求呈指數(shù)級增長。選擇合適的技術來開發(fā)應用或網(wǎng)站變得越來越有挑戰(zhàn)性。其中 React 被認為是增長最快的 Javascript 框架。
截至今天,Github 上約有1,000名貢獻者。 Virtual DOM 和可重用組件等獨特功能吸引了前端開發(fā)人員的注意力。盡管它只是 MVC(模型 - 視圖 - 控制器)中“視圖”的庫,但它對 Angular,Meteor,Vue 等全面的框架也構成了強力的挑戰(zhàn)。下圖為流行的 JS 框架的趨勢:
JS 框架的趨勢
React 面試題
以下是面試官最有可能問到的 50 個 React 面試題和答案。為方便你學習,我對它們進行了分類:
- 基本知識
- React 組件
- React Redux
- React 路由
基本知識
1. 區(qū)分Real DOM和Virtual DOM
|
|---|
2. 什么是React?
- React 是 Facebook 在 2011 年開發(fā)的前端 JavaScript 庫。
- 它遵循基于組件的方法,有助于構建可重用的UI組件。
- 它用于開發(fā)復雜和交互式的 Web 和移動 UI。
- 盡管它僅在 2015 年開源,但有一個很大的支持社區(qū)。
3. React有什么特點?
React的主要功能如下:
- 它使用虛擬DOM而不是真正的DOM。
- 它可以進行服務器端渲染。
- 它遵循單向數(shù)據(jù)流或數(shù)據(jù)綁定。
4. 列出React的一些主要優(yōu)點。
React的一些主要優(yōu)點是:
- 它提高了應用的性能
- 可以方便地在客戶端和服務器端使用
- 由于 JSX,代碼的可讀性很好
- React 很容易與 Meteor,Angular 等其他框架集成
- 使用React,編寫UI測試用例變得非常容易
5. React有哪些限制?
React的限制如下:
- React 只是一個庫,而不是一個完整的框架
- 它的庫非常龐大,需要時間來理解
- 新手程序員可能很難理解
- 編碼變得復雜,因為它使用內聯(lián)模板和 JSX
6. 什么是JSX?
JSX 是J avaScript XML 的簡寫。是 React 使用的一種文件,它利用 JavaScript 的表現(xiàn)力和類似 HTML 的模板語法。這使得 HTML 文件非常容易理解。此文件能使應用非??煽浚⒛軌蛱岣咂湫阅?。下面是JSX的一個例子:
- render(){
- return(
Hello World from Edureka!!
- );
- }
7. 你了解 Virtual DOM 嗎?解釋一下它的工作原理。
Virtual DOM 是一個輕量級的 JavaScript 對象,它最初只是 real DOM 的副本。它是一個節(jié)點樹,它將元素、它們的屬性和內容作為對象及其屬性。 React 的渲染函數(shù)從 React 組件中創(chuàng)建一個節(jié)點樹。然后它響應數(shù)據(jù)模型中的變化來更新該樹,該變化是由用戶或系統(tǒng)完成的各種動作引起的。
Virtual DOM 工作過程有三個簡單的步驟。
1.每當?shù)讓訑?shù)據(jù)發(fā)生改變時,整個 UI 都將在 Virtual DOM 描述中重新渲染。
2.然后計算之前 DOM 表示與新表示的之間的差異。
3.完成計算后,將只用實際更改的內容更新 real DOM。
8. 為什么瀏覽器無法讀取JSX?
瀏覽器只能處理 JavaScript 對象,而不能讀取常規(guī) JavaScript 對象中的 JSX。所以為了使瀏覽器能夠讀取 JSX,首先,需要用像 Babel 這樣的 JSX 轉換器將 JSX 文件轉換為 JavaScript 對象,然后再將其傳給瀏覽器。
9. 與 ES5 相比,React 的 ES6 語法有何不同?
以下語法是 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 | Angular |
|---|---|---|
| 1. 體系結構 | 只有 MVC 中的 View | 完整的 MVC |
| 2. 渲染 | 可以進行服務器端渲染 | 客戶端渲染 |
| 3. DOM | 使用 virtual DOM | 使用 real DOM |
| 4. 數(shù)據(jù)綁定 | 單向數(shù)據(jù)綁定 | 雙向數(shù)據(jù)綁定 |
| 5. 調試 | 編譯時調試 | 運行時調試 |
| 6. 作者 |
React 組件
11. 你怎樣理解“在React中,一切都是組件”這句話。
組件是 React 應用 UI 的構建塊。這些組件將整個 UI 分成小的獨立并可重用的部分。每個組件彼此獨立,而不會影響 UI 的其余部分。
12. 怎樣解釋 React 中 render() 的目的。
每個React組件強制要求必須有一個 render()。它返回一個 React 元素,是原生 DOM 組件的表示。如果需要渲染多個 HTML 元素,則必須將它們組合在一個封閉標記內,例如 可以通過以下方式將組件嵌入到一個組件中: Props 是 React 中屬性的簡寫。它們是只讀組件,必須保持純,即不可變。它們總是在整個應用中從父組件傳遞到子組件。子組件永遠不能將 prop 送回父組件。這有助于維護單向數(shù)據(jù)流,通常用于呈現(xiàn)動態(tài)生成的數(shù)據(jù)。 狀態(tài)是 React 組件的核心,是數(shù)據(jù)的來源,必須盡可能簡單?;旧蠣顟B(tài)是確定組件呈現(xiàn)和行為的對象。與props 不同,它們是可變的,并創(chuàng)建動態(tài)和交互式組件??梢酝ㄟ^ 可以用 箭頭函數(shù)(=>)是用于編寫函數(shù)表達式的簡短語法。這些函數(shù)允許正確綁定組件的上下文,因為在 ES6 中默認下不能使用自動綁定。使用高階函數(shù)時,箭頭函數(shù)非常有用。 React 組件的生命周期有三個不同的階段: 一些最重要的生命周期方法是: 在 React 中,事件是對鼠標懸停、鼠標單擊、按鍵等特定操作的觸發(fā)反應。處理這些事件類似于處理 DOM 元素中的事件。但是有一些語法差異,如: 事件參數(shù)重包含一組特定于事件的屬性。每個事件類型都包含自己的屬性和行為,只能通過其事件處理程序訪問。 合成事件是圍繞瀏覽器原生事件充當跨瀏覽器包裝器的對象。它們將不同瀏覽器的行為合并為一個 API。這樣做是為了確保事件在不同瀏覽器中顯示一致的屬性。 Refs 是 React 中引用的簡寫。它是一個有助于存儲對特定的 React 元素或組件的引用的屬性,它將由組件渲染配置函數(shù)返回。用于對 render() 返回的特定元素或組件的引用。當需要進行 DOM 測量或向組件添加方法時,它們會派上用場。 以下是應該使用 refs 的情況: 可以使用 export 和 import 屬性來模塊化代碼。它們有助于在不同的文件中單獨編寫組件。 React 表單類似于 HTML 表單。但是在 React 中,狀態(tài)包含在組件的 state 屬性中,并且只能通過 高階組件是重用組件邏輯的高級方法,是一種源于 React 的組件模式。 HOC 是自定義組件,在它之內包含另一個組件。它們可以接受子組件提供的任何動態(tài),但不會修改或復制其輸入組件中的任何行為。你可以認為 HOC 是“純(Pure)”組件。 HOC可用于許多任務,例如: 純(Pure) 組件是可以編寫的最簡單、最快的組件。它們可以替換任何只有 render() 的組件。這些組件增強了代碼的簡單性和應用的性能。 key 用于識別唯一的 Virtual DOM 元素及其驅動 UI 的相應數(shù)據(jù)。它們通過回收 DOM 中當前所有的元素來幫助 React 優(yōu)化渲染。這些 key 必須是唯一的數(shù)字或字符串,React 只是重新排序元素而不是重新渲染它們。這可以提高應用程序的性能。 以下是MVC框架的一些主要問題: Flux 是一種強制單向數(shù)據(jù)流的架構模式。它控制派生數(shù)據(jù),并使用具有所有數(shù)據(jù)權限的中心 store 實現(xiàn)多個組件之間的通信。整個應用中的數(shù)據(jù)更新必須只能在此處進行。 Flux 為應用提供穩(wěn)定性并減少運行時的錯誤。 Redux 是當今最熱門的前端開發(fā)庫之一。它是 JavaScript 程序的可預測狀態(tài)容器,用于整個應用的狀態(tài)管理。使用 Redux 開發(fā)的應用易于測試,可以在不同環(huán)境中運行,并顯示一致的行為。 Redux 使用 “Store” 將程序的整個狀態(tài)存儲在同一個地方。因此所有組件的狀態(tài)都存儲在 Store 中,并且它們從 Store 本身接收更新。單一狀態(tài)樹可以更容易地跟蹤隨時間的變化,并調試或檢查程序。 Redux 由以下組件組成: React 中的 Action 必須具有 type 屬性,該屬性指示正在執(zhí)行的 ACTION 的類型。必須將它們定義為字符串常量,并且還可以向其添加更多的屬性。在 Redux 中,action 被名為 Action Creators 的函數(shù)所創(chuàng)建。以下是 Action 和Action Creator 的示例: Reducers 是純函數(shù),它規(guī)定應用程序的狀態(tài)怎樣因響應 ACTION 而改變。Reducers 通過接受先前的狀態(tài)和 action 來工作,然后它返回一個新的狀態(tài)。它根據(jù)操作的類型確定需要執(zhí)行哪種更新,然后返回新的值。如果不需要完成任務,它會返回原來的狀態(tài)。 Store 是一個 JavaScript 對象,它可以保存程序的狀態(tài),并提供一些方法來訪問狀態(tài)、調度操作和注冊偵聽器。應用程序的整個狀態(tài)/對象樹保存在單一存儲中。因此,Redux 非常簡單且是可預測的。我們可以將中間件傳遞到 store 來處理數(shù)據(jù),并記錄改變存儲狀態(tài)的各種操作。所有操作都通過 reducer 返回一個新狀態(tài)。 Redux 的優(yōu)點如下: React 路由是一個構建在 React 之上的強大的路由庫,它有助于向應用程序添加新的屏幕和流。這使 URL 與網(wǎng)頁上顯示的數(shù)據(jù)保持同步。它負責維護標準化的結構和行為,并用于開發(fā)單頁 Web 應用。 React 路由有一個簡單的API。 雖然 Router 用于定義多個路由,當用戶定義特定的 URL 時,如果此 URL 與 Router 內定義的任何 “路由” 的路徑匹配,則用戶將重定向到該特定路由。所以基本上我們需要在自己的應用中添加一個 Router 庫,允許創(chuàng)建多個路由,每個路由都會向我們提供一個獨特的視圖 幾個優(yōu)點是: 希望這套 React 面試題和答案能幫你準備面試。祝一切順利!、、13. 如何將兩個或多個組件嵌入到一個組件中?
Hello
Header Component
14. 什么是 Props?
15. React中的狀態(tài)是什么?它是如何使用的?
this.state() 訪問它們。16. 區(qū)分狀態(tài)和 props
條件 State Props 1. 從父組件中接收初始值 Yes Yes 2. 父組件可以改變值 No Yes 3. 在組件中設置默認值 Yes Yes 4. 在組件的內部變化 Yes No 5. 設置子組件的初始值 Yes Yes 6. 在子組件的內部更改 No Yes 17. 如何更新組件的狀態(tài)?
this.setState()更新組件的狀態(tài)。
Hello {this.state.name}
Your Id is {this.state.id}
18. React 中的箭頭函數(shù)是什么?怎么用?
19. 區(qū)分有狀態(tài)和無狀態(tài)組件。
有狀態(tài)組件 無狀態(tài)組件 1. 在內存中存儲有關組件狀態(tài)變化的信息 1. 計算組件的內部的狀態(tài) 2. 有權改變狀態(tài) 2. 無權改變狀態(tài) 3. 包含過去、現(xiàn)在和未來可能的狀態(tài)變化情況 3. 不包含過去,現(xiàn)在和未來可能發(fā)生的狀態(tài)變化情況 4. 接受無狀態(tài)組件狀態(tài)變化要求的通知,然后將 props 發(fā)送給他們。 4.從有狀態(tài)組件接收 props 并將其視為回調函數(shù)。 20. React組件生命周期的階段是什么?
21. 詳細解釋 React 組件的生命周期方法。
22. React中的事件是什么?
23. 如何在React中創(chuàng)建一個事件?
24. React中的合成事件是什么?
25. 你對 React 的 refs 有什么了解?
Hello !!!
26. 列出一些應該使用 Refs 的情況。
27. 如何模塊化 React 中的代碼?
This is a child component
28. 如何在 React 中創(chuàng)建表單
setState() 更新。因此元素不能直接更新它們的狀態(tài),它們的提交是由 JavaScript 函數(shù)處理的。此函數(shù)可以完全訪問用戶輸入到表單的數(shù)據(jù)。
29. 你對受控組件和非受控組件了解多少?
受控組件 非受控組件 1. 沒有維持自己的狀態(tài) 1. 保持著自己的狀態(tài) 2.數(shù)據(jù)由父組件控制 2.數(shù)據(jù)由 DOM 控制 3. 通過 props 獲取當前值,然后通過回調通知更改 3. Refs 用于獲取其當前值 30. 什么是高階組件(HOC)?
31. 你能用HOC做什么?
32. 什么是純組件?
33. React 中 key 的重要性是什么?
React Redux
34. MVC框架的主要問題是什么?
35. 解釋一下 Flux
36. 什么是Redux?
37. Redux遵循的三個原則是什么?
38. 你對“單一事實來源”有什么理解?
39. 列出 Redux 的組件。
40. 數(shù)據(jù)如何通過 Redux 流動?
41. 如何在 Redux 中定義 Action?
42. 解釋 Reducer 的作用。
43. Store 在 Redux 中的意義是什么?
44. Redux與Flux有何不同?
Flux Redux 1. Store 包含狀態(tài)和更改邏輯 1. Store 和更改邏輯是分開的 2. 有多個 Store 2. 只有一個 Store 3. 所有 Store 都互不影響且是平級的 3. 帶有分層 reducer 的單一 Store 4. 有單一調度器 4. 沒有調度器的概念 5. React 組件訂閱 store 5. 容器組件是有聯(lián)系的 6. 狀態(tài)是可變的 6. 狀態(tài)是不可改變的 45. Redux 有哪些優(yōu)點?
React 路由
46. 什么是React 路由?
47. 為什么React Router v4中使用 switch 關鍵字 ?
標記會按順序將已定義的 URL 與已定義的路由進行匹配。找到***個匹配項后,它將渲染指定的路徑。從而繞過其它路線。48. 為什么需要 React 中的路由?
49. 列出 React Router 的優(yōu)點。
),其中我們將特定的子路由()包起來。 組件中。50. React Router與常規(guī)路由有何不同?
主題 常規(guī)路由 React 路由 參與的頁面 每個視圖對應一個新文件 只涉及單個HTML頁面 URL 更改 HTTP 請求被發(fā)送到服務器并且接收相應的 HTML 頁面 僅更改歷史記錄屬性 體驗 用戶實際在每個視圖的不同頁面切換 用戶認為自己正在不同的頁面間切換
文章名稱:面試 | 必須要會的50個React面試題
轉載來源:http://fisionsoft.com.cn/article/cdisjop.html


咨詢
建站咨詢
