React JS 面試題（2022 年）

在一輪電話面試之後，您將不得不面對關於您的資格和技能的典型問題的步入式面試。 除了開放式問題的一般準備外，您還應該知道如何回答技術問題。

即使您以自信和魅力回答問題，您在回答技術問題時也必須準確。 我們整理了一些技術問題供您在面試前準備。

將這些視為您在 React JS 面試中可以預期的問題類型的示例。

Q.1) 解釋 Real DOM 和 Virtual DOM 的區別？

Ans: Virtual DOM 更新速度更快，但不能直接更新 HTML。 如果元素更新，它可以更新 JSX。 如果您不想浪費內存，這是一個很好的選擇，而且它也很容易操作。

另一方面，Real DOM 更新速度較慢，但可以直接更新 HTML。 但是，它們並不具有成本效益，因為從元素更新創建的 DOM 操作起來很昂貴。 除此之外，Real DOM 還需要大量的存儲空間。

Q.2) 你如何描述“反應”？

Ans: Reach 由 Facebook 開發，它遵循基於組件的方法，有助於形成可重用的 UI 組件。 它是一個前端 JavaScrip 庫，用於創建複雜的移動 UI 和交互式 Web。 React 於 2015 年開源，如今它擁有廣泛的社區支持。

Q.3) 你能告訴我們使用 React 的主要優勢嗎？

Ans: React 提高了應用程序的性能效率，而且您可以在客戶端和服務器端使用它。 由於 JSX，用 React 編寫的代碼是可讀的，編寫 UI 測試變得無憂無慮。 可以輕鬆地將 React 與 Angular 和 Meteor 等其他框架集成。

Q.4) React 的三個主要特性是什麼？

Ans: React 使用虛擬 DOM 而不是真實的 DOM。 它在使用服務器端渲染時遵循數據綁定或單向流，

Q.5) 你認為 React 有什麼限制嗎？

Ans：是的，我認為對於初學者級別的程序員來說很難掌握，而且由於 JSX 和內聯模板，編碼會變得非常困難。 此外，作為一個廣泛的框架，熟悉 React 需要時間。

Q.6) 描述虛擬 DOM 及其工作。

Ans: Virtual DOM 是真實 DOM 的副本，它是一個輕量級的 JavaScript 對象。 它是一個節點樹，將所有屬性、內容和元素作為對象及其屬性列出。 React 中的 render 函數從其組件創建一個節點樹。 當用戶或系統執行多個操作時，它會不斷更新樹以響應數據模型的變化。

Virtual DOM 的工作遵循三個步驟：

1. 首先，即使數據有細微的變化，整個 UI 也會以 Virtual DOM 表示形式呈現。
2. 這會在新的和以前的 DOM 的表示之間產生差異，這是計算出來的。
3. 真正的 DOM 只會更新計算完成後更改的內容。

Q.7) 告訴我們你對 JSX 了解多少？

Ans: JSX 是 React 使用類似 HTML 的模板語法來利用 javascript 的表現力的文件。 它是 JavaScript SML 的簡寫，使任何 HTML 文件都易於掌握。 JSX 用於提高應用程序的效率和性能。

Q.8) 解釋 React 和 Angular 之間的區別。

Ans： React 和 Angular 之間有一些主要區別，例如前者僅獲得 MVC 視圖而後者獲得完整 MVC 視圖的架構。 在渲染方面，Angular 有客戶端渲染，而 React 有服務器端渲染。 React 使用虛擬 DOM 和單向數據綁定，Angular 使用真實 DOM 和雙向數據綁定。 Angular 中的調試是運行時調試，而 React 有編譯時調試。 最後，谷歌創建了 Angular，而構建 React 的功勞歸於 Facebook。

Q.9) 道具是什麼意思？

Ans: Props 是只讀組件，應該保持不可變或純，它是“React 中的屬性”的簡寫。 在應用程序中，它們從父組件發送到子組件，這有助於保持數據的單向流動。 道具還有助於呈現動態生成的數據。

Q.10) React 中的狀態是什麼，你如何使用它們？

Ans： States 是 React 組件的靈魂，它們必須被簡化，因為它們是數據源。 可以說狀態是決定組件行為和渲染的對象。 可以對狀態進行更改，因為它們在創建交互式和動態組件時是可變且有效的。

Q.11) 狀態和道具之間的主要區別是什麼？

Ans: props 中的父組件可以更改值，但不能在狀態下發生。 但是，狀態的組件內部有變化，但 props 並非如此。 與父組件類似，子組件也沒有任何變化，但可以在 props 中觀察到。

Q.12) state 和 props 的相似之處是什麼？

Ans: state 和 props 的相似之處主要有三個。

1. 它們都從父組件接收初始值。
2. 在這兩種情況下，您都可以在組件內設置默認值。
3. 在子組件中，您可以輕鬆設置初始值。

Q.13) 什麼是有狀態組件？

Ans：組件內存中的狀態變化是由有狀態組件存儲的，它們也有權改變狀態並知道狀態中存在的所有變化。 無狀態組件在通知它們所需的狀態更改後發送道具。

Q.14) 我們所說的無狀態組件是什麼意思？

Ans：組件的內部狀態是由無狀態組件計算出來的，它們沒有改變狀態的權限。 他們缺乏關於現在、過去和未來狀態變化的知識。 最後，有狀態組件向它們發送道具，它們將其視為回調函數。

Q.15) 描述合成事件。

Ans：作為瀏覽器原生事件的跨瀏覽器包裝器的對象稱為合成事件。 它們的關鍵功能是通過組合多個瀏覽器的行為來創建一個 API。 這確保了跨不同瀏覽器的事件屬性一致。

Q.16) 什麼是 refs，什麼時候應該使用它們？

Ans: Ref 表示 React 中的 References，它是一個屬性，用於存儲特定 React 組件或元素的引用。 組件中的渲染配置函數返回這些引用。 它們有助於向重要組件添加方法並獲得 DOM 測量值。 我們還可以使用引用來管理焦點、選擇媒體播放或文本。 此外，它們還有助於與第三方 DOM 庫集成並觸發命令式動畫。

Q.17) 什麼是受控組件？

Ans:控制組件不能維護自己的狀態，父組件控制數據。 此外，它們在 props 的幫助下獲取當前值，並使用回調來通知更改。

Q.18) 您對非受控組件了解多少？

Ans：不受控制的組件保持其狀態。 在這裡，與受控組件不同，DOM 控制數據。 他們還使用 refs 來導出他們的當前值。

Q.19) 陳述 Redux 的優勢。

Ans: Redux 提供以下優點 –

• 組織：在 Redux 上團隊合作變得更容易，因為它特別關注代碼的組織，使其更加一致。
• 易於測試：代碼是獨立的、可測試的，因為它具有孤立的、小而純的功能。
• 社區：Redux 擁有一個龐大而有才華的社區的支持，該社區在構建多個應用程序的同時不斷改進庫。
• 開發人員工具：開發人員可以輕鬆跟踪應用程序中的所有內容，從狀態更改到操作。
• 服務器端渲染：在 redux 中，您只需要將 store 發送到客戶端，由於應用程序的性能提升，因此可以提供更好的用戶體驗。
• 可維護性：代碼具有嚴格的結構和可預測的結果，使其更易於維護。
• 結果的可預測性：將當前狀態操作與應用程序的某些部分同步不會混淆，因為只有一個存儲源。

結論

如果你有恆心和專注，學習 React Js 並不復雜。 一旦你徹底了解了你的編程語言，你就可以輕鬆應對任何面試。 如果您現在只是在探索該語言或想要加深您的知識，請查看我們的利物浦約翰摩爾大學計算機科學理學碩士課程。 這個為期 19 個月的課程包括一些最熱門的工具，包括 React、Java、JavaScript、Spring、Hyperledger 和 Ethereum，僅舉幾例。

完成本課程後，您將對 React 有更深入的了解。 不僅如此，您還將有資格擔任軟件開發人員/工程師、全棧開發人員、區塊鏈開發人員、雲專家/架構師、網絡安全工程師、數據工程師和 DevOps 工程師等高薪職位。