15個用解決方案的訪談問題

React的受歡迎程度沒有顯示出衰落的跡象，對開發人員的需求仍然超過了世界許多城市的供應。對於經驗不足的開發人員（或那些在就業市場上暫時不在工作市場的開發人員），在面試階段證明您的知識可能令人生畏。

在本文中，我們將研究15個問題，涵蓋了一系列知識，這些知識涉及與React有效理解和合作的核心。對於每個問題，我將總結答案，並給出其他資源的鏈接，您可以在其中找到更多信息。

鑰匙要點

>本文提供了15種常見的反應訪談問題的綜合列表，涵蓋了一系列知識，這些知識涉及與React有效理解和有效合作的核心，例如虛擬DOM，JSX，類和功能性組件，狀態和狀態和道具，狀態和道具， React鉤子等等。

>

>文章強調了了解階級和功能組件之間差異的重要性，鍵在渲染集合中的作用以及狀態與道具之間的區別。
• >本文還涵蓋了更高級的主題，例如道具鑽探，反應上下文，redux，用於造型應用程序的不同方法以及受控和不受控制的組件的概念。
>本文通過突出了React Hooks的優勢，消除了對基於類的組件的需求，使重複使用邏輯更容易，並導致更可讀，可測試的代碼。
1。什麼是虛擬dom？
答案
虛擬DOM是組成您應用程序UI的實際HTML元素的內存表示。重新渲染組件時，虛擬DOM將其與DOM模型的更改進行比較，以創建要應用的更新列表。主要優點是它的效率很高，僅對實際DOM進行最小的必要更改，而不必重新渲染大塊。

進一步閱讀

了解虛擬DOM

>虛擬DOM解釋

2。什麼是JSX？

• 答案
JSX是JavaScript語法的擴展，它允許編寫看起來像HTML的代碼。它將其編譯為常規的JavaScript函數調用，提供了一種為組件創建標記的更好的方法。
• >
以此JSX：

它可以轉化為以下JavaScript：>

<span><span><span><div</span> className<span>="sidebar"</span> /></span>
</span>

進一步閱讀

• JSX
的簡介
• jsx深度

3。類組件和功能性的組件有什麼區別？

>

答案

在React 16.8（引入鉤子）之前，使用基於類的組件來創建維持內部狀態或使用生命週期方法所需的組件（即ComponentDidMount和shose shoreComponentUpdate）。基於類的組件是一個ES6類，該類別擴展了React的組件類，並且至少實現了Render（）方法。

類組件：

>功能組件是無狀態的（再次，<span>React.createElement( </span> <span>'div', </span> <span>{className: 'sidebar'} </span><span>) </span>>

>功能組件：

>

<span>class Welcome extends React<span>.Component</span> {
</span>  <span>render() {
</span>    <span>return <h1>Hello, {this.props.name}</h1>;
</span>  <span>}
</span><span>}
</span>

注意：React 16.8中的鉤子的引入意味著這些區別不再適用（請參閱問題14和15）。

進一步閱讀

>功能組件與反應

中的類成分 React

的功能

• 的功能
4。鍵是為了什麼？

>

答案

在呈現React中的集合時，在每個重複的元素中添加一個鍵，對於幫助反應跟踪元素和數據之間的關聯很重要。密鑰應該是獨特的ID，理想情況下是收集項目中的UUID或其他獨特的字符串：

不使用鍵，或使用索引作為鍵，在添加和刪除集合中的項目時可能會導致奇怪的行為。

<span>function <span>Welcome</span>(props) {
</span>  <span>return <h1>Hello, {props.name}</h1>;
</span><span>}
</span>

進一步閱讀

>列表和鍵

了解React的關鍵道具
• 5。狀態和道具之間有什麼區別？
>

答案

props是從其父母傳遞到組件中的數據。它們不應突變，而應僅顯示或用於計算其他值。狀態是一個組件的內部數據，可以在組件的使用壽命中進行修改，並在重新匯款之間維護。

進一步閱讀

> props vs state

6。為什麼要調用SetState而不是直接突變狀態？
• 答案

如果您嘗試直接突變組件的狀態，則React無法知道它需要重新渲染組件。通過使用setState（）方法，React可以更新組件的UI。

獎金

作為獎勵，您還可以談論不能保證如何同步的狀態更新。如果您需要基於另一個狀態（或Props）更新組件的狀態，請將函數傳遞給SetState（），該函數將狀態和道具作為其兩個參數：>

<span><span><span><div</span> className<span>="sidebar"</span> /></span>
</span>

進一步閱讀

• >正確使用狀態

7。您如何限制以道具的價值類型或使其要求？

>

答案

>為了鍵入組件的支柱，您可以使用Prop-Types軟件包（以前作為React的一部分，在15.5之前包含在React的一部分）來聲明預期的價值類型以及是否需要道具：

<span>React.createElement(
</span>  <span>'div',
</span>  <span>{className: 'sidebar'}
</span><span>)
</span>

進一步閱讀

用proptypes
typechecking

8。什麼是道具鑽探，如何避免它？

>

答案

當您需要將數據從父組件傳遞到層次結構中較低的組件時，就會發生

支撐鑽探，這是通過其他不需要道具本身的組件“鑽孔”的。 > 有時，可以通過對組件進行重構，避免過早將組件分解為較小的組件，並將公共狀態保留在最接近的共同父母中，從而避免使用道具鑽孔。您需要在組件樹中深/分開的組件之間共享狀態，您可以使用React的上下文API或諸如Redux（Redux）的專用狀態管理庫。

進一步閱讀

Prop鑽孔

• 9。什麼是反應上下文？

答案

通過React提供了上下文API，以解決應用程序中多個組件之間共享狀態的問題。在引入上下文之前，唯一的選擇是引入單獨的州管理庫，例如Redux。但是，許多開發人員認為Redux引入了許多不必要的複雜性，尤其是對於較小的應用程序。

進一步閱讀

上下文（react docs）

如何用react鉤和上下文api
• 替換redux
• 10。什麼是redux？

答案

Redux是在上下文API存在之前創建的第三方國家管理庫。它基於一個稱為商店的狀態容器的概念，該組件可以從AS Props接收數據。更新商店的唯一方法是將操作派遣到商店，該操作將傳遞到還原器中。還原器接收到動作和當前狀態，並返回一個新狀態，將訂閱的組件觸發重新渲染。

進一步閱讀

開始使用redux

開始

深入研究redux

11。對React應用程序進行樣式的最常見方法是什麼？
• 答案

>造型組件的樣式組件有多種方法，每個方法都有優點和缺點。要提到的主要內容是：

• 內聯樣式：非常適合原型製作，但具有局限性（例如，偽級的樣式）
基於類的CSS樣式：性能多於內聯風格，並且是新手React 的開發人員熟悉的
• > css-in-js樣式：有多種庫可以在組件中聲明樣式為JavaScript，更像是代碼。
• 進一步閱讀

如何樣式的反應組件

• 12。受控組件和不受控制的組件有什麼區別？
>

答案

>在HTML文檔中，許多形式的元素（例如，，<input>）維護自己的狀態。一個不受控制的組件將DOM視為這些輸入狀態的真理來源。在受控組件中，內部狀態用於跟踪元素值。當輸入的值發生變化時，React重新呈現輸入。 與非反應代碼集成時，不受控制的組件可能很有用（例如，如果您需要支持某種jQuery form插件）。 <h3>> </h3>進一步閱讀<p> </p> <p>受控與未控制的輸入</p> <h3>受控組件（react docs）</h3> <ul>不受控制的組件（react doc）<li> </li> <li>13。生命週期方法是什麼？ </li> <li>答案</li> 基於類的組件可以聲明在其生命週期中的某些點所調用的特殊方法，例如安裝時（渲染到DOM）以及即將被卸載時。這些對於設置和拆除組件可能需要的東西很有用，設置計時器或綁定到瀏覽器事件。 </ul>以下生命週期方法可在您的組件中實現：<ancy>> <h2> </h2> componentWillmount：在創建組件後呼叫，但在將其渲染到DOM<h3>>之前 </h3>componentDidmount：在第一個渲染後打電話；組件的DOM元素現已可用<p> </p>componentWillReceiveProps：prop更新時呼叫 <p> showscomponentupdate：收到新的道具時，此方法可以防止重新渲染以優化性能<and>> </and></p>componentwillupdate：在收到新的道具<ul>>和<li> showscomponentupdate返回true true </li>時，請致電 <li>componentDidupdate：在組件已更新</li>之後調用 <li> componentWillunMount：在將組件從DOM刪除之前撥打，允許您清理事件聽眾之類的內容。 </li>> <li> </li>處理功能組件時，使用效果掛鉤可用於復制生命週期行為。 <li>進一步閱讀<em> </em> </li>> React生命週期方法<li> </li>組件生命週期API<li> </li> </ul>14。什麼是React Hooks？ <p>> </p>答案<h3> </h3>鉤子是React試圖將基於類的組件（即內部狀態和生命週期方法）的優勢帶到功能組件的嘗試。 <ancy>>>>>><h3>進一步閱讀</h3> <ul> <li>在5分鐘內學習React Hooks</li> <li> React Hooks：如何開始並建立自己的</li>> </ul> <h2>15。 React Hooks的優點是什麼？ </h2> <h3>答案</h3> <p>引入鉤子反應有幾個陳述的好處：<ance> </ance></p> <ul>刪除對基於類的組件，生命週期鉤和此關鍵字Shenanigans <li>的需求 </li>>通過將共同功能抽象為自定義鉤<li>使重複使用邏輯更容易重複使用 通過能夠將邏輯與組件本身分開，更可讀，可檢驗的代碼</li> <li> </li>進一步閱讀</ul> <h3> </h3> React Hooks的好處<ul> <li>反應掛鉤 - 與較舊的可重複使用邏輯方法的優點和比較。 </li> <li>總結</li> </ul>儘管絕不是全面的清單（React正在不斷發展），但這些問題涵蓋了很多基礎。了解這些主題將為您提供有關圖書館的良好工作知識，以及其最近的一些更改。跟進建議的進一步閱讀將有助於您鞏固自己的理解，因此您可以證明深入的知識。 <h2> </h2>>我們將跟進一份針對採訪代碼練習的指南，因此請留意不久的將來。 <p>祝你好運！ </p> <p>常見問題解答準備為React訪談</p> <p>></p>我應該如何為React開發人員工作面試做準備？ <h2>為React開發人員的工作面試做準備，React的核心概念，與React相關的練習編碼練習，審查您的React項目組合，並準備好與州管理，組成的生命週期以及相關技術討論您的經驗React Router。 </h2> <h3></h3>>在面試之前，研究公司及其開發需求的最佳方法是什麼？ <p>>通過訪問其網站，檢查其Web應用程序或項目，並了解如何在其技術堆棧中使用反應，從而研究公司。量身定制您的知識，滿足他們的特定需求，並表現出您為基於React的項目做出貢獻的熱情。 </p> <h3></h3>>我應該如何為我的簡歷量身定制我的簡歷？ <p>>通過強調您對React的體驗，包括特定項目，技術和與React開發有關的成就來量身定制簡歷。強調您對React組件，州管理和任何相關庫的了解。 </p> <h3></h3>>有哪些常見的特定於React的訪談問題？ <p>常見的反應訪談問題包括“解釋反應組件生命週期”，“您如何管理反應狀態？”和“使用React Hooks有什麼好處？”</p>><h3>></h3>>如何有效地準備與React開發有關的技術問題？與反應有關的練習編碼練習，例如構建組件，管理狀態以及使用道具和環境。熟悉反應概念，例如虛擬DOM和組件可重複使用性。 <p></p> <h3>>如何在訪談中證明我對React的熟練程度？ </h3>>通過與現實世界項目討論您的經驗，解釋您如何優化性能，並分享您構建的複雜組件的示例，從而演示您的React技能。準備解釋您的狀態管理和組件架構的方法。 <p> </p> <h3>>在訪談中了解React的組成生命週期有什麼意義？ </h3>了解React組件生命週期對於有效管理組件行為和狀態至關重要。準備解釋生命週期方法，以及何時在現實世界中使用它們。 <p></p>w <h3> hat是在React開發人員訪談中避免的一些常見錯誤嗎？ </h3>常見的錯誤包括無法充分解釋您的項目，而不是詢問有關公司或角色的問題，並證明缺乏有關React Basics的知識。通過徹底的準備和周到的交流來避免這些陷阱。 <p>></p></ancy></ancy>

以上是15個用解決方案的訪談問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！