React的常見面試題有哪些

React的常見面試題有哪些？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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 中，類似 <input>, <textarea> 和 <select> 這樣的表單元素會維護自身的狀態，并基于用戶的輸入來更新。當用戶提交表單時，前面提到的元素的值將隨表單一起被發送。但在 React 中會有些不同，包含表單元素的組件將會在 state 中追蹤輸入的值，并且每次調用回調函數時，如 onChange 會更新 state，重新渲染組件。一個輸入表單元素，它的值通過 React 的這種方式來控制，這樣的元素就被稱為"受控元素"。

22、在 React 中，refs 的作用是什么？

答：Refs 可以用于獲取一個 DOM 節點或者 React 組件的引用。何時使用 refs 的好的示例有管理焦點/文本選擇，觸發命令動畫，或者和第三方 DOM 庫集成。你應該避免使用 String 類型的 Refs 和內聯的 ref 回調。Refs 回調是 React 所推薦的。

23、何為高階組件(higher order component)？

答：高階組件是一個以組件為參數并返回一個新組件的函數。HOC 運行你重用代碼、邏輯和引導抽象。最常見的可能是 Redux 的 connect 函數。除了簡單分享工具庫和簡單的組合，HOC最好的方式是共享 React 組件之間的行為。如果你發現你在不同的地方寫了大量代碼來做同一件事時，就應該考慮將代碼重構為可重用的 HOC。

24. 使用箭頭函數(arrow functions)的優點是什么？

答：1. 作用域安全：在箭頭函數之前，每一個新創建的函數都有定義自身的 this 值(在構造函數中是新對象；在嚴格模式下，函數調用中的 this 是未定義的；如果函數被稱為“對象方法”，則為基礎對象等)，但箭頭函數不會，它會使用封閉執行上下文的 this 值。

2. 簡單：箭頭函數易于閱讀和書寫

3. 清晰：當一切都是一個箭頭函數，任何常規函數都可以立即用于定義作用域。開發者總是可以查找 next-higher 函數語句，以查看 this 的值

25、為什么建議傳遞給 setState 的參數是一個 callback 而不是一個對象？

答：因為 this.props 和 this.state 的更新可能是異步的，不能依賴它們的值去計算下一個 state。

26、除了在構造函數中綁定 this，還有其它方式嗎？

答：可以使用屬性初始值設定項(property initializers)來正確綁定回調，create-react-app 也是默認支持的。在回調中你可以使用箭頭函數，但問題是每次組件渲染時都會創建一個新的回調。

27、怎么阻止組件的渲染？

答：在組件的 render 方法中返回 null 并不會影響觸發組件的生命周期方法

28、當渲染一個列表時，何為 key？設置 key 的目的是什么？

答：Keys 會有助于 React 識別哪些 items 改變了，被添加了或者被移除了。Keys 應該被賦予數組內的元素以賦予(DOM)元素一個穩定的標識，選擇一個 key 的最佳方法是使用一個字符串，該字符串能惟一地標識一個列表項。很多時候你會使用數據中的 IDs 作為 keys，當你沒有穩定的 IDs 用于被渲染的 items 時，可以使用項目索引作為渲染項的 key，但這種方式并不推薦，如果 items 可以重新排序，就會導致 re-render 變慢

29、(在構造函數中)調用 super(props) 的目的是什么？

答：在 super() 被調用之前，子類是不能使用 this 的，在 ES2015 中，子類必須在 constructor 中調用 super()。傳遞 props 給 super() 的原因則是便于(在子類中)能在 constructor 訪問 this.props。

30、何為 JSX ？

答：JSX 是 JavaScript 語法的一種語法擴展，并擁有 JavaScript 的全部功能。JSX 生產 React "元素"，你可以將任何的 JavaScript 表達式封裝在花括號里，然后將其嵌入到 JSX 中。在編譯完成之后，JSX 表達式就變成了常規的 JavaScript 對象，這意味著你可以在 if 語句和 for 循環內部使用 JSX，將它賦值給變量，接受它作為參數，并從函數中返回它。

31何為 Children ？

答：在JSX表達式中，一個開始標簽(比如<a>)和一個關閉標簽(比如</a>)之間的內容會作為一個特殊的屬性props.children被自動傳遞給包含著它的組件。

這個屬性有許多可用的方法，包括 React.Children.map，React.Children.forEach， React.Children.count， React.Children.only，React.Children.toArray。

32、在 React 中，何為 state？

答：State 和 props 類似，但它是私有的，并且完全由組件自身控制。State 本質上是一個持有數據，并決定組件如何渲染的對象。

33、什么原因會促使你脫離 create-react-app 的依賴？

答；當你想去配置 webpack 或 babel presets。

34、何為 redux ？

答：Redux 的基本思想是整個應用的 state 保持在一個單一的 store 中。store 就是一個簡單的 javascript 對象，而改變應用 state 的唯一方式是在應用中觸發 actions，然后為這些 actions 編寫 reducers 來修改 state。整個 state 轉化是在 reducers 中完成，并且不應該有任何副作用

35、在 Redux 中，何為 store ？

答：Store 是一個 javascript 對象，它保存了整個應用的 state。與此同時，Store 也承擔以下職責：

1. 允許通過 getState() 訪問 state
2. 運行通過 dispatch(action) 改變 state
3. 通過 subscribe(listener) 注冊 listeners
4. 通過 subscribe(listener) 返回的函數處理 listeners 的注

36、何為 action ？

答；Actions 是一個純 javascript 對象，它們必須有一個 type 屬性表明正在執行的 action 的類型。實質上，action 是將數據從應用程序發送到 store 的有效載荷。

37、何為 reducer ？

答：一個 reducer 是一個純函數，該函數以先前的 state 和一個 action 作為參數，并返回下一個 state。

38、Redux Thunk 的作用是什么？

答：Redux thunk 是一個允許你編寫返回一個函數而不是一個 action 的 actions creators 的中間件。如果滿足某個條件，thunk 則可以用來延遲 action 的派發(dispatch)，這可以處理異步 action 的派發(dispatch)。

39、何為純函數(pure function)？

答：一個純函數是一個不依賴于且不改變其作用域之外的變量狀態的函數，這也意味著一個純函數對于同樣的參數總是返回同樣的結果。

關于React的常見面試題有哪些問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。