1、說一下React

　　React是Facebook 開發的前端JavaScript庫

　　V層：react並不是完整的MVC框架，而是MVC中的C層

　　虛擬DOM：react引入虛擬DOM，每當數據變化通過reactdiff運算，將上一次的虛擬DOM與本次渲染的DOM進行對比，僅僅只渲染更新的，有效減少了DOM操作

　　JSX語法：js+xml，是js的語法擴展，編譯後轉換成普通的js對象

　　組件化思想：將具有獨立功能的UI模塊封裝為一個組件，而小的組件又可以通過不同的組合嵌套組成大的組件，最終完成整個項目的構建

　　單向數據流：指數據的流向只能由父級組件通過props講數據傳遞給子組件，不能由子組件向父組件傳遞數據

　　要想實現數據的雙向綁定只能由子組件接收父組件props傳過來的方法去改變父組件數據，而不是直接將子組件數據傳給父組件

　　生命周期：簡單說一下生命周期：Mounting(掛載)、Updateing(更新)、Unmounting(卸載)

2、什麽是JSX？為什麽瀏覽器無法讀取JSX

　　JSX 是JavaScript XML 的簡寫，是 React 使用的一種文件

　　它利用 JavaScript 的表現力和類似 HTML 的模板語法

　　使得 HTML 文件非常容易理解。此文件能使應用非常可靠，並能夠提高其性能

　　瀏覽器只能處理 JavaScript 對象，而不能讀取常規 JavaScript 對象中的 JSX

　　所以為了使瀏覽器能夠讀取 JSX，首先，需要用Babel轉換器將 JSX 文件轉換為 JavaScript 對象，然後再將其傳給瀏覽器

3、React與Angular有何不同？

　　react是Facebook出品，angular是Google

　　react只有MVC中的C，angular是MVC

　　react使用虛擬DOM，angular使用真實DOM

　　react是單項數據綁定，angular是雙向數據綁定

4、react生命周期函數

　　（1）Mounting掛載階段

　　constructor()

　　componentWillMount()組件掛載到頁面之前

　　render()創建虛擬DOM，進行diff運算，更新DOM樹。不可進行setState()

　　componentDidMount()組件掛載到頁面之後，可以在此請求數據

　　（2）Updateing更新階段

　　componentWillReceiveProps()父級數據發生變化

　　shouldComponentUpdate()

　　性能優化：這個函數只返回true或false，表示接下來的組件是否需要更新（重新渲染）

　　返回true就是緊接著以下的生命周期函數，返回false表示組件不需要重新渲染，不再執行任何生命周期函數（包括render）

　　componentWillUpdate() 組件更新之前，不可進行setState() 會導致函數調用shouldComponentUpdate從而進入死循環

　　render()

　　componentDidUpdate()組件更新之後

　　（3）Unmounting卸載階段

　　componentWillUnmount 組件卸載和銷毀之前立刻停用

　　可以在此銷毀定時器，取消網絡請求，消除創建的相關DOM節點等

5、shouldComponentUpdate是做什麽的，（react性能優化是哪個周期函數？）

　　shouldComponentUpdate 這個方法用來判斷是否需要調用render方法重新繪制dom

　　因為DOM的描繪非常消耗性能，如果我們能在shouldComponentUpdate 方法中能夠寫出更優化的 dom diff 算法，可以極大的提高性能

6、為什麽虛擬 DOM 會提高性能?

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

前端面試題整理—React篇