1. React 中 keys 的作用是什么？
Keys 是 React 用于追蹤哪些列表中元素被修改、被添加或者被移除的輔助標(biāo)識(shí)。在開(kāi)發(fā)過(guò)程中，我們需要保證某個(gè)元素的 key 在其同級(jí)元素中具有唯一性。在 React Diff 算法中 React 會(huì)借助元素的 Key 值來(lái)判斷該元素是新近創(chuàng)建的還是被移動(dòng)而來(lái)的元素，從而減少不必要的元素重渲染。
2. 調(diào)用 setState 之后發(fā)生了什么？
React會(huì)將當(dāng)前傳入的參數(shù)對(duì)象與組件當(dāng)前的狀態(tài)合并,然后觸發(fā)調(diào)和過(guò)程；
在調(diào)和的過(guò)程中,React會(huì)以相對(duì)高效的方式根據(jù)新的狀態(tài)構(gòu)建React元素樹(shù)，React得到的元素樹(shù)之后,React會(huì)自動(dòng)計(jì)算出新的樹(shù)與老的樹(shù)的節(jié)點(diǎn)的差異,然后根據(jù)差異對(duì)界面進(jìn)行最小化的渲染,在React的差異算法中,React能夠精確的知道在哪些位置發(fā)生看改變以及應(yīng)該如何去改變,這樣就保證了UI是按需更新的而不是重新渲染整個(gè)界面。
3. 什么是調(diào)和過(guò)程？
調(diào)和過(guò)程是實(shí)現(xiàn)UI更新的一個(gè)過(guò)程，目的是在用戶(hù)無(wú)感知的情況下將數(shù)據(jù)的更新體現(xiàn)到UI上。調(diào)優(yōu)過(guò)程中對(duì)比新的virtual dom樹(shù)以及舊的virtual dom樹(shù)，接著找出兩者所不同的地方，根據(jù)不同的地方來(lái)修改現(xiàn)有的DOM。
4. 什么是虛擬dom？為什么虛擬Dom可以提高性能？
虛擬Dom本質(zhì)上來(lái)說(shuō)是一個(gè)js對(duì)象。
當(dāng)react第一次渲染的時(shí)候，數(shù)據(jù)和模板生成一個(gè)用于描述真實(shí)Dom的虛擬Dom，用虛擬Dom生成真實(shí)Dom來(lái)顯示。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，React生成新的虛擬Dom，比較新舊虛擬Dom找到區(qū)別，然后操作Dom中有區(qū)別的那個(gè)節(jié)點(diǎn)，改變顯示效果。采用虛擬Dom之所以能夠提升性能，是因?yàn)閖s創(chuàng)建和比對(duì)js對(duì)象要比創(chuàng)建和比對(duì)真實(shí)Dom性能要高（因?yàn)閯?chuàng)建真實(shí)Dom要調(diào)用web應(yīng)用級(jí)別的函數(shù)）。
5. Diff算法。
用于計(jì)算虛擬Dom中被改變的部份。
有三個(gè)策略，第一個(gè)策略是層級(jí)比較，對(duì)組件樹(shù)的每一層進(jìn)行遍歷，如果找到了不同，則這一層級(jí)下面的全部層級(jí)全部替換。
第二個(gè)策略數(shù)據(jù)差異比較，如果比對(duì)的時(shí)候出現(xiàn)不同類(lèi)型的組件（比如無(wú)狀態(tài)組件和普通組件），就把該組件判斷為臟組件，從而替換整個(gè)組件下的所有子節(jié)點(diǎn)。如果類(lèi)型相同，就正常比對(duì)虛擬Dom。
第三個(gè)策略是循環(huán)中key值的比較方案，給列表結(jié)構(gòu)的每個(gè)單元添加唯一的key屬性，方便比較。
6. React生命周期函數(shù)有哪些？
- 掛載時(shí)執(zhí)行的：
componentWillMount-即將被掛載時(shí)執(zhí)行；
Render-渲染函數(shù)
componentDidMount-掛載完成后執(zhí)行 - 組件更新時(shí)的：
sholdComponentUpdate-更新之前，返回true或false
ComponetWillUpdate-更新之前
Render-重新渲染
ComponentDidUpdate-更新完成 - 組件卸載時(shí)的：
componentWillUnmount-組件卸載
7. 如何利用shouldComponentUpdate來(lái)提高性能？
當(dāng)shouldComponentUpdate 返回false時(shí)，就會(huì)停止組件更新，不再執(zhí)行下一生命周期函數(shù)?？梢栽谶@個(gè)方法中判斷數(shù)據(jù)是否有更改，是否需要調(diào)用 render 方法重新描繪 dom。
8. 什么是高階組件？
高階組件是一個(gè)以組件為參數(shù)并返回一個(gè)新組件的函數(shù)。
9. AJAX放在哪個(gè)構(gòu)造函數(shù)中執(zhí)行？
componentDidMount-組件掛載完成。但更好的方法是引入redux和redux-thunk，新增一個(gè)返回函數(shù)的actionCreactor存放異步請(qǐng)求，這樣做的好處是避免組件臃腫。
10. React中refs的作用是什么？
Refs是React提供給我們的安全訪(fǎng)問(wèn)Dom元素或者某個(gè)組件的句柄。我們可以為元素添加ref屬性，然后在回調(diào)函數(shù)中接受該元素在Dom樹(shù)中的句柄，該值會(huì)作為回調(diào)函數(shù)的第一個(gè)參數(shù)返回。
11. UI組件和容器組件。
UI組件主要負(fù)責(zé)UI的呈現(xiàn)；
容器組件主要管理數(shù)據(jù)和邏輯。
一般UI組件寫(xiě)模板，容器組件寫(xiě)邏輯，兩者可通過(guò)react-redux提供的connet方法聯(lián)系起來(lái)。
12. 什么是無(wú)狀態(tài)組件？
使用函數(shù)創(chuàng)建的組件，沒(méi)有生命周期鉤子。當(dāng)一個(gè)組件只有render的邏輯時(shí)，可以定義為無(wú)狀態(tài)組件，比類(lèi)組件新能更高，因?yàn)轭?lèi)組件使用前要實(shí)例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可。
13. 組件的狀態(tài)和屬性之間有何不同？
State是一種數(shù)據(jù)結(jié)構(gòu)，用于組件掛載時(shí)所需數(shù)據(jù)的默認(rèn)值。State可能會(huì)隨著時(shí)間的推移而發(fā)生突變，但多數(shù)時(shí)候是作為用戶(hù)事件行為的結(jié)果。
Props則是組件的配置。props由父組件傳遞給子組件，并且就子組件而言，props是不可變的。組件不能改變自身的props，但可以把其子組件的props放在一起統(tǒng)一管理。
14. 為什么建議傳遞給setState的參數(shù)是一個(gè)callback而不是一個(gè)對(duì)象。
setState() 將組件state的更改排入隊(duì)列，并通知React需要使用更新后的state重新渲染此組件及其子組件。但React 將 setState 視為請(qǐng)求，而不是立即更新組件的命令。調(diào)用setState后立即讀取出this.state，值尚未及時(shí)更新，使用回調(diào)函數(shù)可以避免這個(gè)問(wèn)題。
15. 請(qǐng)描述一個(gè)事件在React中的處理方式。
為了解決跨瀏覽器兼容性的問(wèn)題，react中的事件處理程序?qū)鬟fSyntheticEvent的實(shí)例，它是react的瀏覽器本機(jī)事件的跨瀏覽器包裝器。
react并沒(méi)有將事件附加到子節(jié)點(diǎn)本身，它使用單個(gè)事件監(jiān)聽(tīng)器監(jiān)聽(tīng)頂層的所有事件。這意味著在更新dom時(shí)，react不需要擔(dān)心跟蹤事件監(jiān)聽(tīng)器。
16. 在構(gòu)造函數(shù)中調(diào)用super(props)的目的是什么？
在super()被調(diào)用之前，子類(lèi)是不能使用this的。傳遞props給super的原因是便于在子類(lèi)中能在constructor中訪(fǎng)問(wèn)this.props。
17. React有幾種構(gòu)建組件的方式？
三種。createClass()、es6 class 和無(wú)狀態(tài)函數(shù)。
18. 請(qǐng)描述redux的一個(gè)工作流程。
Redux想要改變數(shù)據(jù)，首先創(chuàng)建一個(gè)action，action通過(guò)dispatch函數(shù)傳遞給store，store把之前的數(shù)據(jù)和action轉(zhuǎn)發(fā)給reducer，reducer將數(shù)據(jù)作相應(yīng)處理后還給store，store用新數(shù)據(jù)替換舊數(shù)據(jù)，組件能夠感知到store中的數(shù)據(jù)變化，取出新數(shù)據(jù)給本身使用。這就是redux的一個(gè)基本流程。
19. Redux-think。
Redux-think使redux中間件，作用于action和store之間，是對(duì)dispatch方法的拓展。未使think之前，dispatch只能接收對(duì)象，使用think之后，dispatch可以接收一個(gè)函數(shù)。好處是可以把一些異步操作比如網(wǎng)絡(luò)請(qǐng)求放到action里面，避免組件過(guò)于臃腫。
