2022 年你需要知道的 20 個 React 面試問題和答案

React 是當今市場上增長最快的 JavaScript 框架之一。 如果你是一名有抱負的前端開發人員，我們整理了一些重要的React 面試問題，可以幫助你學習所有主要概念。

使用 React 為單頁或移動應用程序構建用戶界面變得很舒服。 你最有可能在求職面試中被問及這個工具。 由於這個原因，React 認證和速成課程的需求量也很大。

所以，這裡有一些最重要的React 面試問題，可以幫助你留下良好的第一印象。

熱門 React 面試問題和答案

1.比較真實DOM和虛擬DOM

雖然真正的 DOM 更新慢，但它可以直接更新 HTML。 如果元素更新，它會創建一個新的 DOM。 但是，在這種情況下，DOM 操作成本很高，並且會導致大量內存浪費。

Virtual DOM 可以更快地更新並在元素更新時更新 JSX。 它不能直接更新 HTML。 但是在這個編程概念中，DOM 操作很容易。 並且不存在內存浪費的問題。

2. 簡單解釋 React

React 是 Facebook 於 2011 年開發的 JavaScript 庫。它於 2015 年開源，在個人開發人員和公司社區中廣受歡迎。 React 在開發複雜的交互式移動和 Web UI 時非常方便。 它使用基於組件的方法來構建可重用的組件。

3.列出React的一些特性

React 使用虛擬 DOM 和服務器端渲染。 而且，它遵循數據綁定的原則，這是一個單向的數據流。 這三個特性提供了對 React 的清晰概述。

4. React 有什麼優勢？ 另外，列出它的一些限制。

React 與 Meteor、Angular 等其他 JavaScript 框架集成並不難。使用此工具編寫 UI 測試用例變得很方便。 對於客戶端和服務器端來說，它都是一個簡單易用的工具。 React 的另一個優點是它提高了應用程序的性能。 此外，由於 JSX，代碼具有很高的可讀性。

現在讓我們看看一些缺點。

首先，React 是一個庫，而不是一個成熟的框架。 內聯模板和 JSX 可以使編碼變得複雜，這可能是新手程序員可以掌握的任務。 由於 React 庫非常龐大，因此理解它可能是一個耗時的過程。

5. 什麼是 React JSX？

JSX 是 JavaScript XML 的縮寫形式。 它將 HTML 標籤轉換為 React 元素，使用類似於 HTML 的語法捕捉 JavaScript 的表現力。 JSX 將 HTML 標籤轉換為反應元素。 這種類型的文件易於理解，並產生強大的高性能應用程序。

6. 瀏覽器可以讀取 JSX 嗎？

不，瀏覽器只能讀取 JavaScript 對象。 所以，我們需要讓瀏覽器能夠讀取 JSX。 本練習涉及將 JSX 文件轉換為 JavaScript 對象，然後再將其傳遞給瀏覽器。 像 Babel 這樣的變形金剛也可以用來做同樣的事情。

7.解釋虛擬DOM的工作原理

虛擬 DOM 最初是真實 DOM 的輕量級副本。 它是節點樹形式的 JavaScript 對象。 React 中的渲染函數從包含元素、屬性和對象屬性的 React 組件創建一個節點樹。 用戶或系統的各種操作會導致數據模型發生突變並更新此樹。 虛擬 DOM 中的三步過程按以下方式工作：

1. 當底層數據發生變化時，整個 UI 會重新渲染
2. 然後，將新的虛擬 DOM 表示與前一個進行比較，併計算差異
3. 考慮到實際的變化或差異，更新真實的 DOM

8. 區分 React 和 Angular。

與 React 中的虛擬 DOM 和單向數據綁定相比，Angular 使用真實的 DOM 和雙向數據綁定。 它具有運行時調試，而不是像 React 那樣的編譯時調試。 此外，Angular 由 Google 維護，而 React 是 Facebook 產品。

9. “一切都是 React 中的一個組件。” 你同意嗎？

React 應用程序的用戶界面由稱為組件的構建塊組成。 這些組件將整個 UI 分解為獨立的、可重用的部分。 然後這些片段獨立於 UI 的其餘部分進行渲染。

10. React 中 render() 的作用是什麼？

React 中的每個組件都有一個 render()，它返回代表原生 DOM 組件的單個元素。 當需要呈現多個 HTML 元素時，元素會被組合在一起。 元素在結束標記內分組，如 <group>、<form>、<div> 等。無論何時調用，此函數都必須返回相同的結果。

這些是一些通用的React 面試問題和答案，可以幫助你做好準備。 讓我們涵蓋更多內容以加深對這些概念的理解。

11. React 中的 props 是什麼？

屬性在 React 中稱為“道具”。 這些是只讀的、不可變的組件，在整個應用程序中從父級傳遞給子級。 保持數據的單向流動是不可或缺的，尤其是在動態生成數據時。 因此，子組件無法將 props 發送回父組件。

12. 解釋 React 中的狀態

狀態是使用 this.state() 訪問的 React 組件的核心。 狀態基本上是決定組件渲染和行為的數據源。 與道具不同，狀態是創建交互式組件的可變對象。

閱讀： Python 開發人員面試問答

13. React 組件的生命週期有哪些階段？

React 組件的生命週期分為三個主要階段。 這些是：

• 初始渲染：組件進入 DOM。
• 更新：組件在 props 或狀態更改發生時更新或重新渲染。
• 卸載：組件被銷毀並從 DOM 中移除。

14. React 中如何使用 refs？

我們可以返回對 render() 返回的特定元素的引用。 Refs 屬性使這成為可能。 因此，refs 存儲了對要由渲染配置函數返回的 React 組件的引用。 我們通常使用 refs 向組件添加方法或向 DOM 添加度量。

15. 受控組件與非受控組件

受控組件和非受控組件之間的主要區別在於，前者通過 props 獲取當前值，後者通過 refs 獲取當前值。 受控組件不會保持自己的狀態，因為可以通過回調通知更改。 父組件控制它們的數據。 另一方面，不受控制的組件維護它們的狀態，而 DOM 控制它們的數據。

閱讀：頂級區塊鏈面試問答

16. 解釋 React 中的事件

在 React 中，諸如按鍵、鼠標懸停、點擊等特定反應會觸發稱為事件的反應。 事件參數包含它自己的一組屬性和行為，能夠由事件處理程序單獨訪問。 事件作為函數傳遞並使用 camelCase 命名。

17. 通量是什麼意思？

Flux 是一種架構模式，它通過減少運行時錯誤來為應用程序提供穩定性。 它使用中央“存儲”來實現不同組件之間的通信，從而維護對數據的權限。 整個應用程序中的所有更新都必須僅在此處進行。

18. 什麼是 Redux？ 它的組成部分是什麼？

Redux 是一個可預測的狀態容器，用於 JavaScript 應用程序的狀態管理。 它使用單個狀態樹或“存儲”將整個應用程序的狀態存儲在一個地方。

Redux 由以下部分組成：

• 動作：描述發生的事情的對象
• Reducer：確定狀態將如何變化
• Store：包含對象和狀態的整個應用程序的樹
• View：顯示Store給出的數據

閱讀： MongoDB 面試問答

從世界頂級大學在線學習軟件課程。 獲得行政 PG 課程、高級證書課程或碩士課程，以加快您的職業生涯。

19、Reducers的意義是什麼？

Reducers 指定應用程序的狀態如何響應特定操作而改變。 根據活動的類型，reducers 確定需要哪些更新，然後返回新值。 如果不需要更改，它們將返回相同的先前狀態。

20. 什麼是 React 路由器？

React Router 是一個路由庫，可幫助向 JavaScript 應用程序添加新的屏幕和流程。 您將此庫添加到您的應用程序以創建多條路線，每條路線都指向一個獨特的頁面。 URL 與網頁上顯示的內容相匹配。

至此，我們已經涵蓋了您在任何面試中都會遇到的大部分React 面試問題。 深入了解所有這些主題將有助於完成前端開發工作！

如果您有興趣了解有關 React 的更多信息，請查看 upGrad 和 IIIT-B 的全棧軟件開發執行 PG 計劃，該計劃專為工作專業人士設計，提供 500 多個小時的嚴格培訓、9 個以上的項目和作業，IIIT -B 校友身份、實用的實踐頂點項目和頂級公司的工作協助。