【相關專題推薦：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 中，類似 ,
