一些關於React的常見面試問題（分享）

【相關專題推薦：react面試題（2020）】

#1、redux中間件

答案：中間件提供第三方插件的模式，自訂攔截action -> reducer 的過程。變成 action -> middlewares -> reducer 。這種機制可以讓我們改變資料流，實現如非同步 action ，action 過濾，日誌輸出，異常報告等功能。

常見的中間件：redux-logger：提供日誌輸出；redux-thunk：處理非同步操作；redux-promise：處理非同步操作；actionCreator的回傳值是promise

2、redux有什麼缺點

答：1.一個元件所需的數據，必須由父元件傳過來，而不能像flux中直接從store取。

2.當一個元件相關資料更新時，即使父元件不需要用到這個元件，父元件還是會重新render，可能會有效率影響，或是需要寫複雜的shouldComponentUpdate來判斷。

3、react元件的分割業務元件技術元件？

答：依照元件的職責通常把元件分為UI元件和容器元件。 UI 元件負責 UI 的呈現，容器元件負責管理資料和邏輯。兩者透過React-Redux 提供connect方法連結起來。

4、react生命週期函數

答案：一、初始化階段：

getDefaultProps:取得實例的預設屬性

getInitialState:取得每個實例的初始化狀態

componentWillMount：元件即將被裝載、渲染到頁面上

render:元件在這裡產生虛擬的DOM節點

componentDidMount:元件真正在被裝載之後

二、運行中狀態：

componentWillReceiveProps:元件將要接收到屬性的時候呼叫

shouldComponentUpdate:元件接受到新屬性或新狀態的時候（可以傳回false ，接收資料後不更新，阻止render調用，後面的函數不會繼續執行了）

componentWillUpdate:元件即將更新不能修改屬性和狀態

render:元件重新描繪

componentDidUpdate:元件已經更新

三、銷毀階段：

componentWillUnmount:元件即將銷毀

5、react效能最佳化是哪個週期函數？

答案：shouldComponentUpdate 這個方法用來判斷是否需要呼叫render方法重新描繪dom。因為dom的描繪非常消耗性能，如果我們能在shouldComponentUpdate方法中能夠寫出更優化的dom diff演算法，可以極大的提高性能。

6、為什麼虛擬dom會提高效能?

答案：虛擬dom相當於在js和真實dom中間加了一個緩存，利用dom diff演算法避免了沒有必要的dom操作，從而提高性能。

具體實作步驟如下：

1.用JavaScript 物件結構表示DOM 樹的結構；然後用這個樹建構一個真正的DOM 樹，插到文檔當中；

#2.當狀態變更的時候，重新建構一棵新的物件樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異；

把2所記錄的差異應用到步驟1所建構的真正的DOM樹上，視圖就更新了。

7、diff演算法?

答：1.把樹狀結構依照層級分解，只比較同級元素。

2.為清單結構的每個單元新增唯一的key屬性，方便比較。

3.React 只會匹配相同class 的component（這裡面的class指的是元件的名字）

4.合併操作，呼叫component 的setState 方法的時候, React 將其標記為dirty.到每一個事件循環結束, React 檢查所有標記dirty 的component 重新繪製.

6．選擇性子樹渲染。開發人員可以重寫shouldComponentUpdate提高diff的效能。

8、react效能最佳化方案

答案：1）重寫shouldComponentUpdate來避免不必要的dom操作。

2）使用 production 版本的react.js。

3）使用key來幫助React識別列表中所有子組件的最小變化

9、簡述flux 思想

回答：Flux 的最大特點，就是數據的"單向流動"。

1.使用者造訪View

2.View 發出使用者的Action

#3.Dispatcher 收到Action，要求Store 進行對應的更新

4 .Store 更新後，發出一個"change"事件

5.View 收到"change"事件後，更新頁面

10、React項目用過什麼腳手架？ Mern? Yeoman?

答：Mern：MERN是腳手架的工具，它可以很容易地使用Mongo, Express, React and NodeJS產生同構JS應用。它最大限度地減少安裝時間，並得到您使用的成熟技術來加速開發。

11、你了解React嗎？

答案：了解，React是facebook搞出來的一個輕量級的元件庫，用來解決前端視圖層的一些問題，就是MVC中V層的問題，它內部的Instagram網站就是用React搭建的。

12、React解決了什麼問題？

答案：解決了三個問題： 1.元件重複問題， 2.效能問題，3.相容性問題：

13、React的協定？

答：React遵循的協議是“BSD許可證專利開源協議”，這個協議比較奇葩，如果你的產品跟facebook沒有競爭關係，你可以自由的使用react，但是如果有競爭關係，你的react的使用許可將會被取消

14、了解shouldComponentUpdate嗎？

答案：React虛擬dom技術要求不斷的將dom和虛擬dom進行diff比較，如果dom樹比價大，這種比較操作會比較耗時，因此React提供了shouldComponentUpdate這種補丁函數，如果對於一些變化，如果我們不希望某個元件刷新，或者刷新後跟原來其實一樣，就可以使用這個函數直接告訴React，省去diff操作，進一步的提高了效率。

15、React 的工作原理？

答案：React 會建立一個虛擬 DOM(virtual DOM)。當一個元件中的狀態改變時，React 首先會透過 "diffing" 演算法來標記虛擬 DOM 中的改變，第二步是調節(reconciliation)，會用 diff 的結果來更新 DOM。

16、使用 React 有何優點？

答案：1.只要查看render 函數就會很容易知道一個元件是如何被渲染的

2.JSX 的引入，使得元件的程式碼更加可讀，也更容易看懂元件的佈局，或元件之間是如何互相引用的

3.支援服務端渲染，這可以改進SEO 和效能

4.易於測試

# 5.React 只專注於View 層，所以可以和其它任何框架(如Backbone.js, Angular.js)一起使用

17、展示元件(Presentational component)和容器元件(Container component)之間有何不同？

答案：1.展示元件關心元件看起來是什麼。展示專門透過 props 接受資料和回調，幾乎不會有自身的狀態，但當展示元件擁有自身的狀態時，通常也只關心 UI 狀態而不是資料的狀態。

2.容器元件則更關心元件是如何運作的。容器元件會為展示元件或其它容器元件提供資料和行為(behavior)，它們會呼叫 Flux actions，並將其作為回調提供給展示元件。容器元件經常是有狀態的，因為它們是(其它元件的)資料來源

18、類別元件(Class component)和函數式元件(Functional component)之間有何不同？

答案：1.類別元件不僅允許你使用更多額外的功能，如元件本身的狀態和生命週期鉤子，也能讓元件直接存取store 並維持狀態

#2.當元件僅是接收props，並將元件自身渲染到頁面時，該元件就是一個'無狀態元件(stateless component)'，可以使用一個純函數來建立這樣的元件。這種組件也被稱為啞組件(dumb components)或展示組件

19、(組件的)狀態(state)和屬性(props)之間有何不同？

答案：1. State 是一種資料結構，用於元件掛載時所需資料的預設值。 State 可能會隨著時間的推移而發生突變，但多數時候是作為使用者事件行為的結果。

2. Props(properties 的簡寫)則是組件的配置。 props 由父元件傳遞給子元件，並且就子元件而言，props 是不可變的(immutable)。元件不能改變自身的 props，但是可以把其子元件的 props 放在一起(統一管理)。 Props 也不僅僅是資料--回呼函數也可以透過 props 傳遞。

20、應該在 React 元件的何處發起 Ajax 請求？

答案：在 React 元件中，應該在 componentDidMount 中發起網路請求。這個方法會在元件第一次「掛載」(被加到 DOM)時執行，在元件的生命週期中只會執行一次。更重要的是，你不能保證在元件掛載之前 Ajax 請求已經完成，如果是這樣，也意味著你會嘗試在一個未掛載的元件上呼叫 setState，這將不起作用。在 componentDidMount 中發起網路請求將保證這有一個元件可以更新了。

21、何為受控元件(controlled component)？

答案；在 HTML 中，類似 , 和 <select> 這樣的表單元素會維護自身的狀態，並基於使用者的輸入來更新。當使用者提交表單時，前面提到的元素的值將隨表單一起發送。但在 React 中會有些不同，包含表單元素的元件會在 state 中追蹤輸入的值，每次呼叫回呼函數時，例如 onChange 會更新 state，重新渲染元件。一個輸入表單元素，它的值透過 React 的這種方式來控制，這樣的元素就被稱為"受控元素"。 </p> <p style="text-align:left;">22、在 React 中，refs 的作用是什麼？ </p> <p style="text-align:left;">答案：Refs 可以用來取得 DOM 節點或 React 元件的參考。何時使用 refs 的好的範例有管理焦點/文字選擇，觸發命令動畫，或和第三方 DOM 庫整合。你應該避免使用 String 類型的 Refs 和內聯的 ref 回呼。 Refs 回呼是 React 所推薦的。 </p> <p style="text-align:left;">23、何為高階元件(higher order component)？ </p> <p style="text-align:left;">答案：高階元件是一個以元件為參數並傳回一個新元件的函數。 HOC 運行你重複使用程式碼、邏輯和引導抽象。最常見的可能是 Redux 的 connect 函數。除了簡單分享工具庫和簡單的組合，HOC最好的方式是共享 React 元件之間的行為。如果你發現你在不同的地方寫了大量程式碼來做同一件事時，就應該考慮將程式碼重構為可重複使用的 HOC。 </p> <p style="text-align:left;">24. 使用箭頭函數(arrow functions)的優點是什麼？ </p> <p style="text-align:left;">答案：1. 作用域安全性：在箭頭函數之前，每一個新建立的函數都有定義自身的this 值(在建構函數中是新物件；在嚴格模式下，函數呼叫中的this 是未定義的；如果函數被稱為“物件方法”，則為基礎物件等)，但箭頭函數不會，它會使用封閉執行上下文的this 值。 </p> <p style="text-align:left;">2. 簡單：箭頭函數易於閱讀和書寫</p> <p style="text-align:left;">3. 清晰：當一切都是一個箭頭函數，任何常規函數都可以立即用於定義作用域。開發者總是可以尋找 next-higher 函數語句，以查看 this 的值</p> <p style="text-align:left;">25、為什麼建議傳遞給 setState 的參數是一個 callback 而不是一個物件？ </p> <p style="text-align:left;">答案：因為 this.props 和 this.state 的更新可能是異步的，不能依賴它們的值去計算下一個 state。 </p> <p style="text-align:left;">26、除了在建構子中綁定 this，還有其方式嗎？ </p> <p style="text-align:left;">答案：可以使用屬性初始值設定項目(property initializers)來正確綁定回調，create-react-app 也是預設支援的。在回調中你可以使用箭頭函數，但問題是每次元件渲染時都會建立一個新的回呼。 </p> <p style="text-align:left;">27、怎麼阻止元件的渲染？ </p> <p style="text-align:left;">答案：在元件的 render 方法中傳回 null 並不會影響觸發元件的生命週期方法</p> <p style="text-align:left;">28、當渲染一個清單時，何為 key？設定 key 的目的是什麼？ </p> <p style="text-align:left;">答案：Keys 會有助於 React 辨識哪些 items 改變了，被加入了或被移除了。 Keys 應該被賦予數組內的元素以賦予(DOM)元素一個穩定的標識，選擇一個 key 的最佳方法是使用一個字串，該字串能惟一地標識一個列表項。很多時候你會使用資料中的IDs 作為keys，當你沒有穩定的IDs 用於被渲染的items 時，可以使用項目索引作為渲染項目的key，但這種方式並不推薦，如果items 可以重新排序，就會導致re-render 變慢</p> <p style="text-align:left;">29、(在建構函式中)呼叫super(props) 的目的是什麼？ </p> <p style="text-align:left;">答案：在 super() 被呼叫之前，子類別是不能使用 this 的，在 ES2015 中，子類別必須在 constructor 中呼叫 super()。傳遞 props 給 super() 的原因則是便於(在子類別中)能在 constructor 存取 this.props。 </p> <p style="text-align:left;">30、何為 JSX ？ </p> <p style="text-align:left;">答案：JSX 是 JavaScript 語法的一種語法擴展，並擁有 JavaScript 的全部功能。 JSX 生產 React "元素"，你可以將任何的 JavaScript 運算式封裝在花括號裡，然後將其嵌入到 JSX 中。在編譯完成之後，JSX 表達式變成了常規的 JavaScript 對象，這意味著你可以在 if 語句和 for 循環內部使用 JSX，將它賦值給變量，接受它作為參數，並從函數中返回它。 </p> <p style="text-align:left;">31 何為 Children ？ </p> <p style="text-align:left;">答案：在JSX表達式中，一個開始標籤(例如<a>)和一個關閉標籤(例如</a>)之間的內容會作為一個特殊的屬性props.children被自動傳遞給包含著它的組件。 </p> <p style="text-align:left;">這個屬性有許多可用的方法，包括 React.Children.map，React.Children.forEach， React.Children.count， React.Children.only，React.Children.toArray。 </p> <p style="text-align:left;">32、在 React 中，何為 state？ </p> <p style="text-align:left;">答案：State 和 props 類似，但它是私有的，並且完全由元件本身控制。 State 本質上是一個持有數據，並決定元件如何渲染的物件。 </p> <p style="text-align:left;">33、什麼原因會促使你脫離 create-react-app 的依賴？ </p> <p style="text-align:left;">答案；當你想去設定 webpack 或 babel presets。 </p> <p style="text-align:left;">34、何為 redux ？ </p> <p style="text-align:left;">答案：Redux 的基本概念是整個應用的 state 保持在單一的 store 中。 store 是一個簡單的 javascript 對象，而改變應用 state 的唯一方法是在應用程式中觸發 actions，然後為這些 actions 編寫 reducers 來修改 state。整個 state 轉換是在 reducers 中完成，並且不應該有任何副作用</p> <p style="text-align:left;">35、在 Redux 中，何為 store ？ </p> <p style="text-align:left;">答案：Store 是一個 javascript 對象，它保存了整個應用的 state。同時，Store 也承擔以下職責：</p> <ol> <li>允許透過getState() 存取state</li> <li>運行透過dispatch(action) 改變state</li> <li>透過subscribe(listener ) 註冊listeners</li> <li>透過subscribe(listener) 傳回的函式處理listeners 的註解</li> </ol> <p style="text-align:left;">36、何為action ？ </p> <p style="text-align:left;">答案；Actions 是一個純 javascript 對象，它們必須有一個 type 屬性來表明正在執行的 action 的類型。實質上，action 是將資料從應用程式傳送到 store 的有效載荷。 </p> <p style="text-align:left;">37、何為 reducer ？ </p> <p style="text-align:left;">答案：一個 reducer 是一個純函數，該函數以先前的 state 和一個 action 作為參數，並傳回下一個 state。 </p> <p style="text-align:left;">38、Redux Thunk 的作用是什麼？ </p> <p style="text-align:left;">答案：Redux thunk 是一個允許你寫一個回傳一個函數而不是一個 action 的 actions creators 的中間件。如果滿足某個條件，thunk 則可以用來延遲 action 的派發(dispatch)，這可以處理非同步 action 的派發(dispatch)。 </p> <p style="text-align:left;">39、何為純函數(pure function)？ </p> <p style="text-align: left;">答：一個純函數是一個不依賴且不改變其作用域之外的變數狀態的函數，這也意味著一個純函數對於同樣的參數總是會傳回同樣的結果。 </p> <p>更多程式相關內容，請關注php中文網<a href="https://www.php.cn/course.html" target="_blank">程式入門</a>欄位！ </p><p>以上是一些關於React的常見面試問題（分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>陳述：</span><div>本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="react初級基礎面試題（分享）" href="https://m.php.cn/zh-tw/faq/457310.html">react初級基礎面試題（分享）</a></span><span>下一篇：<a class="dBlack" title="react初級基礎面試題（分享）" href="https://m.php.cn/zh-tw/faq/457313.html">react初級基礎面試題（分享）</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><em><a href="https://m.php.cn/zh-tw/article.html" class="bBlack"><i>看更多</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/zh-tw/faq/437082.html" title="React入門知識點整理" class="aBlack">React入門知識點整理</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/443041.html" title="淺談React中取得資料的方法及其優缺點" class="aBlack">淺談React中取得資料的方法及其優缺點</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/446810.html" title="vscode如何開發react" class="aBlack">vscode如何開發react</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/453128.html" title="Java Reactor 反應器模式" class="aBlack">Java Reactor 反應器模式</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/454555.html" title="React必知必會的35個面試題" class="aBlack">React必知必會的35個面試題</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益線上PHP培訓，幫助PHP學習者快速成長！</p></div><div class="footermid"><a href="https://m.php.cn/zh-tw/about/us.html">關於我們</a><a href="https://m.php.cn/zh-tw/about/disclaimer.html">免責聲明</a><a href="https://m.php.cn/zh-tw/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>