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 操作，從而提高性能
Virtual DOM 工作過程有三個簡單的步驟
1）每當底層數據發生改變時，整個 UI 都將在 Virtual DOM 描述中重新渲
2）然後計算之前 DOM 表示與新表示的之間的差異
3）完成計算後，將只用實際更改的內容更新 real DOM
7、調用setState之後發生了什麼？
當調用setState後，新的 state 並沒有馬上生效渲染組件，而是，先看執行流中有沒有在批量更新中
如果有，push到存入到dirtyeComponent中，如果沒有，則遍歷dirty中的component，調用updateComponent,進行state或props的更新
然後更新UI，react進行diff運算，與上一次的虛擬DOM相比較，進行有效的渲染更新組件
8、react diff 原理
diff（翻譯差異）：計算一棵樹形結構轉換成另一棵樹形結構的最少操作
1）把樹形結構按照層級分解，只比較同級元素
2）給列表結構的每個單元添加唯一的 key 屬性，方便比較
3）React 只會匹配相同 class 的 component（這裏面的 class 指的是組件的名字）
4）合併操作，調用 component 的 setState 方法的時候, React 將其標記爲 dirty.到每一個事件循環結束, React 檢查所有標記 dirty 的 component 重新繪製
5）選擇性子樹渲染。開發人員可以重寫 shouldComponentUpdate 提高 diff 的性能
9、setState 何時同步何時異步？
1）setState 只在合成事件（react爲了解決跨平臺，兼容性問題，自己封裝了一套事件機制，代理了原生的事件，像在jsx中常見的onClick、onChange這些都是合成事件）和鉤子函數（生命週期）中是“異步”的，在原生事件和 setTimeout 中都是同步的
2）setState的“異步”並不是說內部由異步代碼實現，其實本身執行的過程和代碼都是同步的，只是合成事件和鉤子函數的調用順序在更新之前，導致在合成事件和鉤子函數中沒法立馬拿到更新後的值，形式了所謂的“異步”，當然可以通過第二個參數 setState(partialState, callback) 中的callback拿到更新後的結果
3）setState 的批量更新優化也是建立在“異步”（合成事件、鉤子函數）之上的，在原生事件和setTimeout 中不會批量更新，在“異步”中如果對同一個值進行多次 setState ， setState 的批量更新策略會對其進行覆蓋，取最後一次的執行，如果是同時 setState 多個不同的值，在更新時會對其進行合併批量更新
10、react渲染機制
1）當頁面一打開，就會調用render構建一棵DOM樹
2）當數據發生變化（ state | props ）時，就會再渲染出一棵DOM樹
3）此時，進行diff運算，兩棵DOM樹進行差異化對比，找到更新的地方進行批量改動
11、React中refs 的作用是什麼？
Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個組件實例的句柄
我們可以爲元素添加 ref 屬性然後在回調函數中接受該元素在 DOM 樹中的句柄
該值會作爲回調函數的第一個參數返回
12、組件的狀態(state)和屬性(props)之間有何不同
State 是一種數據結構，用於組件掛載時所需數據的默認值。State 可能會隨着時間的推移而發生突變，但多數時候是作爲用戶事件行爲的結果
Props(properties 的簡寫)則是組件的配置。props 由父組件傳遞給子組件，並且就子組件而言，props 是不可變的
組件不能改變自身的 props，但是可以把其子組件的 props 放在一起(統一管理)
13、在構造函數中調用 super(props) 的目的是什麼
在 super() 被調用之前，子類是不能使用 this 的，在 ES2015 中，子類必須在 constructor 中調用 super()。傳遞 props 給 super() 的原因則是便於(在子類中)能在 constructor 訪問 this.props
14、爲什麼在componentDidMount()中請求數據
componentDidMount方法中的代碼，是在組件已經完全掛載到網頁上纔會調用被執行，所以可以保證數據的加載
15、何爲受控組件(controlled component)
在HTML 中，類似 , 和 這樣的表單元素會維護自身的狀態，並基於用戶的輸入來更新，當用戶提交表單時，
前面提到的元素的值將隨表單一起被髮送，但在 React 中會有些不同，包含表單元素的組件將會在 state 中追蹤輸入的值，並且每次調用回調函數時
如 onChange 會更新 state，重新渲染組件，一個輸入表單元素，它的值通過 React 的這種方式來控制，這樣的元素就被稱爲”受控元素”
16、何爲高階組件(higher order component)
高階組件是一個以組件爲參數並返回一個新組件的函數。HOC 運行你重用代碼、邏輯和引導抽象，最常見的可能是 Redux 的 connect 函數
除了簡單分享工具庫和簡單的組合，HOC 最好的方式是共享 React 組件之間的行爲
如果你發現你在不同的地方寫了大量代碼來做同一件事時，就應該考慮將代碼重構爲可重用的 HOC
17、React中的狀態是什麼？它是如何使用的？
狀態是 React 組件的核心，是數據的來源，必須儘可能簡單。基本上狀態是確定組件呈現和行爲的對象。與props 不同，它們是可變的，並創建動態和交互式組件。可以通過 this.state() 訪問它們
18、解釋 React 中 render() 的目的
每個React組件強制要求必須有一個 render()。它返回一個 React 元素，是原生 DOM 組件的表示
如果需要渲染多個 HTML 元素，則必須將它們組合在一個封閉標記內，例如 、、
此函數必須保持純淨，即必須每次調用時都返回相同的結果
19、理解“在React中，一切都是組件”這句話
組件是 React 應用 UI 的構建塊。這些組件將整個 UI 分成小的獨立並可重用的部分
每個組件彼此獨立，而不會影響 UI 的其餘部分
20、react父子組件之間如何通信，兄弟組件呢？
父級傳遞子級：把數據掛載子組件的屬性上，子組件通過this.props來接收父組件的數據
子級傳遞父級：父級需要定義一個修改數據的方法，把修改數據的方法傳給子組件，當子組件需要修改父級數據時，調用父級傳過來的修改方法
兄弟組件傳遞：屬於同一個父級，父組件分別和這兩個組件傳遞。比如子組件A操作執行父組件方法，父組件進行修改，然後把信息傳給子組件B
21、請列舉定義react組件的中方法
1）函數式定義的無狀態組件
2）es5原生的方式 React.createClass方式
3）es6中extends React.Component定義的組件
22、react中component和pureComponent區別是什麼？
PureComponent自帶通過props和state的淺對比來實現 shouldComponentUpate()，而Component沒有
比於Component，PureCompoent的性能表現將會更好
23、什麼是無狀態組件，與有狀態組件的區別
無狀態組件主要用來定義模板，接收來自父組件props傳遞過來的數據，使用{props.xxx}的表達式把props塞到模板裏面
有狀態組件主要用來定義交互邏輯和業務數據，使用{this.state.xxx}的表達式把業務數據掛載到容器組件的實例上（有狀態組件也可以叫做容器組件，無狀態組件也可以叫做展示組件），然後傳遞props到展示組件，展示組件接收到props，把props塞到模板裏面
24、在哪些生命週期中可以修改組件的state
componentDidMount和componentDidUpdate
constructor、componentWillMount中setState會發生錯誤：setState只能在mounted或mounting組件中執行
componentWillUpdate中setState會導致死循環
25、調用render時，DOM一定會更新嗎，爲什麼
不一定更新
React組件中存在兩類DOM，render函數被調用後， React會根據props或者state重新創建一棵virtual DOM樹，雖然每一次調用都重新創建，但因爲創建是發生在內存中，所以很快不影響性能。而 virtual dom的更新並不意味着真實DOM的更新，React採用diff算法將virtual DOM和真實DOM進行比較，找出需要更新的最小的部分，這時Real DOM纔可能發生修改
所以每次state的更改都會使得render函數被調用，但是頁面DOM不一定發生修改
26、展示組件(Presentational component)和容器組件(Container component)之間有何不同
展示組件：展示專門通過props接受數據回調，並且幾乎不會有自身的狀態
容器組件：展示組件或者其他容器組件提供容器和行爲；並調用actions，將其作爲回調提供給展示組件,容器組件經常是有狀態的
27、setState的兩個參數
第一個參數是要改變的state對象
第二個參數是state導致的頁面變化完成後的回調，等價於componentDidUpdate
28、React的生命週期函數中，當props改變時 會引發的後續變化，rander()函數什麼時候執行
componentWillUpdate(){}之後
render
componentDidupdate(){}之前
29、React 和 Vue 相對於JQ在開發上有哪些優點？
虛擬DOM的優化，組件化利於維護，組件化方便複用
30、react-router的原理
BrowserRouter或hashRouter用來渲染Router所代表的組件
Route用來匹配組件路徑並且篩選需要渲染的組件
Switch用來篩選需要渲染的唯一組件
Link直接渲染某個頁面組件
Redirect類似於Link，在沒有Route匹配成功時觸發
31、爲什麼React Router v4中使用 switch 關鍵字 ？
雖然
當你想要僅顯示要在多個定義的路線中呈現的單個路線時，可以使用 “switch” 關鍵字，使用時，
與已定義的路由進行匹配。找到第一個匹配項後，它將渲染指定的路徑。從而繞過其它路線
32、瞭解redux麼，說一下redux
redux 是一個應用數據流框架，主要是解決了組件間狀態共享的問題，原理是集中式管理，主要有三個核心方法，action，store，reducer
三大原則：
1）唯一數據源(整個應用的 state 被儲存在一棵 object tree 中，並且這個 object tree 只存在於唯一一個 store 中)
2）reducer必須是純函數（輸入必須對應着唯一的輸出）
3）State 是隻讀的, 想要更改必須經過派發action
redux的工作流程：
使用通過reducer創建出來的Store發起一個Action，reducer會執行相應的更新state的方法，當state更新之後，view會根據state做出相應的變化
1）提供getState()獲取到state
2）通過dispatch(action)發起action更新state
3）通過subscribe()註冊監聽器
33、redux數據流通的過程
1）用戶操作視圖
2）發起一次dispatch。有異步：返回一個函數（使用thunk中間件），沒有異步：return {}
3）進入reducer,通過對應的type去修改state,最後返回一個新的state
34、connect()前兩個參數是什麼？
mapStateToProps(state, ownProps)
允許我們將store中的數據作爲props綁定到組件中，只要store更新了就會調用mapStateToProps方法，mapStateToProps返回的結果必須是object對象，該對象中的值將會更新到組件中
mapDispatchToProps(dispatch, [ownProps])
允許我們將action作爲props綁定到組件中，如果不傳這個參數redux會把dispatch作爲屬性注入給組件，可以手動當做store.dispatch使用
mapDispatchToProps希望你返回包含對應action的object對象
35、redux本身有什麼不足？
1）向事件池中追加方法時，沒有做去重處理
2）把綁定的方從在事件池中移除掉時，用的是arr.splice(index,1)，這樣可能會引起數組塌陷
3）reducer中state，每次返回都需要深克隆，可以在redux中獲取狀態信息時，深克隆，這樣就不用在reducer裏深克隆了
36、你怎麼理解redux的state的
數據按照領域（Domain）分類，存儲在不同的表中，不同的表中存儲的列數據不能重複
表中每一列的數據都依賴於這張表的主鍵，表中除了主鍵以外的其他列，互相之間不能有直接依賴關係
把整個應用的狀態按照領域（Domain）分成若干子State，子State之間不能保存重複的數據
State以鍵值對的結構存儲數據，以記錄的key/ID作爲記錄的索引，記錄中的其他字段都依賴於索引
State中不能保存可以通過已有數據計算而來的數據，即State中的字段不互相依賴
37、React,redux可以運行在服務端嗎?有什麼優勢
1）利於SEO
2）提高首屏渲染速度
3）同構直出，使用同一份JS代碼實現，便於開發和維護
38、列出 Redux 的組件
1）Action – 這是一個用來描述發生了什麼事情的對象
2）Reducer – 這是一個確定狀態將如何變化的地方
3）Store – 整個程序的狀態/對象樹保存在Store中
4）View – 只顯示 Store 提供的數據
39、解釋 Reducer 的作用
Reducers 是純函數，它規定應用程序的狀態怎樣因響應 ACTION 而改變。Reducers 通過接受先前的狀態和 action 來工作，然後它返回一個新的狀態。它根據操作的類型確定需要執行哪種更新，然後返回新的值。如果不需要完成任務，它會返回原來的狀態
40、Store 在 Redux 中的意義是什麼？
Store 是一個 JavaScript 對象，它可以保存程序的狀態，並提供一些方法來訪問狀態、調度操作和註冊偵聽器。應用程序的整個狀態/對象樹保存在單一存儲中。因此，Redux 非常簡單且是可預測的。我們可以將中間件傳遞到 store 處理數據，並記錄改變存儲狀態的各種操作。所有操作都通過 reducer 返回一個新狀態