（收藏）react常用面試題的介紹

這篇文章帶給大家的內容是關於（收藏）react常用面試題的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

下面是一個常用的關於React 的面試問題清單：

無論身為一個面試者，或是招募官，下面這些問題都可以去參考

務必收藏

React 的工作原理

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

使用React 有何優點

只需查看render 函數就會很容易知道一個元件是如何被渲染的

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

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

易於測試

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

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

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

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

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

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

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

(元件的)狀態(state)和屬性(props)之間有何不同

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

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

指出(元件)生命週期方法的不同

componentWillMount -- 多用於根元件中的應用程式配置

componentDidMount -- 在這可以完成所有沒有DOM 就不能做的所有配置，並開始獲取所有你需要的資料；如果需要設定事件監聽，也可以在這完成

componentWillReceiveProps -- 這個週期函數作用於特定的prop 改變導致的state轉換

shouldComponentUpdate -- 如果你擔心元件過度渲染，shouldComponentUpdate 是一個改善效能的地方，因為如果元件接收了新的prop， 它可以阻止(元件)重新渲染。 shouldComponentUpdate 應該傳回一個布林值來決定元件是否要重新渲染

componentWillUpdate -- 很少使用。它可以用來代替元件的componentWillReceiveProps 和shouldComponentUpdate(但不能存取之前的props)

componentDidUpdate -- 常用於更新DOM，回應prop 或state 的改變

componentWillUnmount -- 在這你可以取消網路請求，或移除所有與元件相關的事件監聽器

#

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

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

何為受控元件(controlled component)

在HTML 中，類似, 和<select> 這樣的表單元素會維護自身的狀態，並基於使用者的輸入來更新。當使用者提交表單時，前面提到的元素的值將隨表單一起發送。但在 React 中會有些不同，包含表單元素的元件會在 state 中追蹤輸入的值，並且每次呼叫回呼函數時，例如 onChange 會更新 state，重新渲染元件。一個輸入表單元素，它的值透過 React 的這種方式來控制，這樣的元素就被稱為"受控元素"。 </p> <h4>在 React 中，refs 的作用是什麼</h4> <p>Refs 可以用來取得一個 DOM 節點或 React 元件的參考。何時使用 refs 的好的範例有管理焦點/文字選擇，觸發命令動畫，或和第三方 DOM 庫整合。你應該避免使用 String 類型的 Refs 和內聯的 ref 回呼。 Refs 回呼是 React 所推薦的。 </p> <h4>何為高階元件(higher order component)</h4> <p>高階元件是一個以元件為參數並傳回一個新元件的函數。 HOC 運行你重複使用程式碼、邏輯和引導抽象。最常見的可能是 Redux 的 connect 函數。除了簡單分享工具庫和簡單的組合，HOC最好的方式是共享 React 元件之間的行為。如果你發現你在不同的地方寫了大量程式碼來做同一件事時，就應該考慮將程式碼重構為可重複使用的 HOC。 </p> <p>練習</p> <p>寫一個反轉其輸入的HOC</p> <p>寫一個從API 提供資料給傳入的元件的HOC</p> <p>寫一個實作shouldComponentUpdate來避免reconciliation 的HOC</p> <p>寫一個透過React.Children.toArray 對傳入元件的子元件進行排序的HOC</p> <h4>使用箭頭函數(arrow functions)的優點是什麼</h4> <div> <p>作用域安全性：在箭頭函數之前，每一個新建立的函數都有定義自身的this 值(在建構函數中是新物件；在嚴格模式下，函數呼叫中的this 是未定義的；如果函數被稱為“物件方法”，則為基礎物件等)，但箭頭函數不會，它會使用封閉執行上下文的this 值。 </p> <p>簡單：箭頭函數易於閱讀和書寫</p> <p>清晰：當一切都是一個箭頭函數，任何常規函數都可以立即用於定義作用域。開發者總是可以尋找 next-higher 函數語句，以查看 this 的值</p> </div> <h4>為什麼建議傳遞給 setState 的參數是一個 callback 而不是一個物件</h4> <p>因為 this.props 和 this.state 的更新可能是異步的，不能依賴它們的值去計算下一個 state。 </p> <h4>除了在建構子中綁定<code>this</code>，還有其它方式嗎</h4> <p>#你可以使用屬性初始值設定項(property initializers)來正確綁定回調，create-react-app 也是預設支援的。在回調中你可以使用箭頭函數，但問題是每次元件渲染時都會建立一個新的回呼。 </p> <h4>怎麼阻止元件的渲染</h4> <p>在元件的render 方法中回傳null 並不會影響觸發元件的生命週期方法</p> <h4>當渲染一個清單時，何為key ？設定 key 的目的是什麼</h4> <p>Keys 會有助於 React 識別哪些 items 改變了，被加入了或被移除了。 Keys 應該被賦予數組內的元素以賦予(DOM)元素一個穩定的標識，選擇一個 key 的最佳方法是使用字串，該字串能惟一地標識一個列表項。很多時候你會使用資料中的 IDs 作為 keys，當你沒有穩定的 IDs 當用於被渲染的 items 時，可以使用項目索引作為渲染項目的 key，但這種方式並不推薦，如果 items 可以重新排序，就會導致 re-render 變慢。 </p> <h4>(在建構子中)呼叫super(props) 的目的是什麼</h4> <p>在super() 被呼叫之前，子類別是不能使用this 的，在ES2015 中，子類別必須在constructor 中呼叫super()。傳遞 props 給 super() 的原因則是便於(在子類別中)能在 constructor 存取 this.props。 </p> <h4>何為 JSX</h4> <p>JSX 是 JavaScript 語法的一種語法擴展，並擁有 JavaScript 的全部功能。 JSX 生產 React "元素"，你可以將任何的 JavaScript 表達式封裝在花括號裡，然後將其嵌入到 JSX 中。在編譯完成之後，JSX 表達式就變成了常規的 JavaScript 對象，這意味著你可以在 if 語句和 for 循環內部使用 JSX，將它賦值給變量，接受它作為參數，並從函數中返回它。 </p> <h4>怎麼用React.createElement 重寫下面的程式碼</h4> <p>Question：</p> <pre class="brush:php;toolbar:false">const element = (   <h1 className="greeting">     Hello, rdhub.cn!   </h1> );</pre> <p>Answer：</p> <pre class="brush:php;toolbar:false">const element = React.createElement(   'h1',   {className: 'greeting'},   'Hello, rdhub.cn!' );</pre> <h4>何為<code>Children</code> </h4> <p>在JSX表達式中，一個開始標籤(例如<a>)和一個關閉標籤(例如</a>)之間的內容會作為一個特殊的屬性props.children被自動傳遞給包含著它的組件。 </p> <p>這個屬性有許多可用的方法，包括 React.Children.map，React.Children.forEach， React.Children.count， React.Children.only，React.Children.toArray。 </p> <h4>在 React 中，何為 state</h4> <p>State 和 props 類似，但它是私有的，並且完全由元件本身控制。 State 本質上是一個持有數據，並決定元件如何渲染的物件。 </p> <h4>什麼原因會促使你脫離 create-react-app 的依賴</h4> <p>當你想要去設定 webpack 或 babel presets。 </p> <h4>何為 redux</h4> <p>Redux 的基本想法是整個應用程式的 state 保持在單一的 store 中。 store 就是一個簡單的 javascript 對象，而改變應用 state 的唯一方法是在應用程式中觸發 actions，然後為這些 actions 編寫 reducers 來修改 state。整個 state 轉換是在 reducers 中完成，並且不應該有任何副作用。 </p> <h4>在 Redux 中，何為 store</h4> <p>Store 是一個 javascript 對象，它保存了整個應用的 state。同時，Store 也承擔以下職責：</p> <p>允許透過getState() 存取state</p> <p>運行透過dispatch(action) 改變state</p> <p>透過subscribe(listener) 註冊listeners </p> <p>透過subscribe(listener) 傳回的函數處理listeners 的註銷</p> <h4>何為action</h4> <p>Actions 是一個純javascript 對象，它們必須有一個type 屬性表明正在執行的action 的類型。實質上，action 是將資料從應用程式傳送到 store 的有效載荷。 </p> <h4>何為 reducer</h4> <p>一個 reducer 是一個純函數，該函數以先前的 state 和一個 action 為參數，並傳回下一個 state。 </p> <h4>Redux Thunk 的作用是什麼</h4> <p>Redux thunk 是一個允許你寫一個回傳一個函數而不是一個 action 的 actions creators 的中間件。如果滿足某個條件，thunk 則可以用來延遲 action 的派發(dispatch)，這可以處理非同步 action 的派發(dispatch)。 </p> <h4>何為純函數(pure function)</h4> <p>一個純函數是一個不依賴且不改變其作用域之外的變數狀態的函數，這也意味著一個純函數對於同樣的參數總是會傳回同樣的結果。 </p> <p class="comments-box-content"></p>#<p>以上是（收藏）react常用面試題的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">中间件</a> <a href="javascript:void(0);">ajax</a> <a href="javascript:void(0);">angular.js</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">angular</a> <a href="javascript:void(0);">webpack</a> <a href="javascript:void(0);">String</a> <a href="javascript:void(0);">NULL</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">count</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">foreach</a> <a href="javascript:void(0);">封装</a> <a href="javascript:void(0);">子类</a> <a href="javascript:void(0);">构造函数</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">回调函数</a> <a href="javascript:void(0);">字符串</a> <a href="javascript:void(0);">循环</a> <a href="javascript:void(0);">数据结构</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">map</a> <a href="javascript:void(0);">JS</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">对象</a> <a href="javascript:void(0);">作用域</a> <a href="javascript:void(0);">事件</a> <a href="javascript:void(0);">constructor</a> <a href="javascript:void(0);">严格模式</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">异步</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">算法</a> <a href="javascript:void(0);">ui</a> <a href="javascript:void(0);">重构</a> <a href="javascript:void(0);">SEO</a><div class="clear"></div></div><div class="nphpQianSheng"><span>陳述：</span><div>本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="js中的if 語句、多重分支語句、嵌套語句的用法是什麼" href="https://m.php.cn/zh-tw/faq/412080.html">js中的if 語句、多重分支語句、嵌套語句的用法是什麼</a></span><span>下一篇：<a class="dBlack" title="js中的if 語句、多重分支語句、嵌套語句的用法是什麼" href="https://m.php.cn/zh-tw/faq/412094.html">js中的if 語句、多重分支語句、嵌套語句的用法是什麼</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/388285.html" title="React.js之props" class="aBlack">React.js之props</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/388288.html" title="React.js中的CSS使用" class="aBlack">React.js中的CSS使用</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/388366.html" title="講解react.js中常出現的問題以及解決方法" class="aBlack">講解react.js中常出現的問題以及解決方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/388373.html" title="react.js中的三元運算講述" class="aBlack">react.js中的三元運算講述</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/388378.html" title="react.js實作動態字體顏色切換講述" class="aBlack">react.js實作動態字體顏色切換講述</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/409835.html" title="React.js怎麼使用？ react.js的簡單使用方法介紹（附實例）" class="aBlack">React.js怎麼使用？ react.js的簡單使用方法介紹（附實例）</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>