react面試題（一）

• react 生命週期函數

初始化階段：
getDefaultProps:獲取實例的默認屬性
getInitialState:獲取每一個實例的初始化狀態
componentWillMount：組件即將被裝載、渲染到頁面上（在整個生命週期中只會觸發一次）
render:組件在這裏生成虛擬的 DOM 節點
componentDidMount:組件真正在被裝載以後（在整個生命週期中只會觸發一次）

運行中狀態：
componentWillReceiveProps:組件將要接收到屬性的時候調用
shouldComponentUpdate:組件接受到新屬性或者新狀態的時候（能夠返回 false，接收數據後不更新，阻止 render 調用，後面的函數不會被繼續執行了）
componentWillUpdate:組件即將更新不能修改屬性和狀態
render:組件從新描繪
componentDidUpdate:組件已經更新

銷燬階段：
componentWillUnmount:組件即將銷燬

• 爲何虛擬 dom 會提升性能?

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

用 JavaScript 對象結構表示 DOM 樹的結構；而後用這個樹構建一個真正的 DOM 樹，插到文檔當中當狀態變動的時候，從新構造一棵新的對象樹。

而後用新的樹和舊的樹進行比較，記錄兩棵樹差別把 2 所記錄的差別應用到步驟 1 所構建的真正的 DOM 樹上，視圖就更新了。

• react diff 原理

把樹形結構按照層級分解，只比較同級元素。

給列表結構的每一個單元添加惟一的 key 屬性，方便比較。

React 只會匹配相同 class 的 component（這裏面的 class 指的是組件的名字）。

合併操做，調用 component 的 setState 方法的時候, React 將其標記爲 dirty.到每個事件循環結束, React 檢查全部標記 dirty 的 component 從新繪製.

選擇性子樹渲染。開發人員能夠重寫 shouldComponentUpdate 提升 diff 的性能。

•  (組件的)狀態(state)和屬性(props)之間的區別

  Props是一個屬性值，裏面數據是不能改變的；

  State是一個狀態機，根據數據的改變動改視圖。

• refs 是什麼?

Refs是能訪問DOM元素或組件實例的一個函數；

• React 的工做原理

React 會建立一個虛擬 DOM(virtual DOM)。當一個組件中的狀態改變時，React 首先會經過 "diffing" 算法來標記虛擬 DOM 中的改變；
第二步是調節(reconciliation)，會用 diff 的結果來更新 DOM。

• 什麼是redux？

redux 是一個應用數據流框架，主要是解決了組件間狀態共享的問題，原理是集中式管理，主要有三個核心方法，action，store，reducer，
工做流程是 view 調用 store 的 dispatch 接收 action 傳入 store，reducer 進行 state 操做，view 經過 store 提供的 getState 獲取最新的數據。

新增 state,對狀態的管理更加明確，經過 redux，流程更加規範了，減小手動編碼量，提升了編碼效率，
同時缺點時當數據更新時有時候組件不須要，可是也要從新繪製，有些影響效率。
通常狀況下，咱們在構建多交互，多數據流的複雜項目應用時纔會使用它們。

•  react-redux的實現原理

react-redux是一個輕量級的封裝庫，它主要經過兩個核心方法實現：
Provider：從最外部封裝了整個應用，並向connect模塊傳遞store。
Connect： 
    1、包裝原組件，將state和action經過props的方式傳入到原組件內部。
    二、監聽store tree變化，使其包裝的原組件能夠響應state變化

• redux-thunk

背景：Redux 的基本作法，是用戶發出 Action，Reducer 函數馬上算出新的 State，View 從新渲染，但這是作同步。
而若是有異步請求時，那就不能知道何時獲取的數據有存進store裏面，所以此時須要在請求成功時返回一個標識或狀態，並在此時再觸發action給reducer傳值。
所以，爲了解決異步的問題，就引入了中間件的概念。
redux-thunk 幫助你統一了異步和同步 action 的調用方式，把異步過程放在 action 中解決。

• 對webpack的理解

webpack是一個預編譯模塊方案，它會分析你的項目結構將其打包成適合瀏覽器加載的模塊。
打包原理：把全部依賴打包成一個bundle.js文件，經過代碼分割成單元片斷並按需加載。

• 調用 setState 以後發生了什麼

在代碼中調用setState函數以後，React 會將傳入的參數對象與組件當前的狀態合併，而後觸發所謂的調和過程（Reconciliation）。
通過調和過程，React 會以相對高效的方式根據新的狀態構建 React 元素樹而且着手從新渲染整個UI界面。
在 React 獲得元素樹以後，React 會自動計算出新的樹與老樹的節點差別，而後根據差別對界面進行最小化重渲染。
在差別計算算法中，React 可以相對精確地知道哪些位置發生了改變以及應該如何改變，這就保證了按需更新，而不是所有從新渲染。

• React 中 keys 的做用

Keys 是 React 用於追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識。
在開發過程當中，咱們須要保證某個元素的 key 在其同級元素中具備惟一性。渲染同類型元素不帶key只會產生性能問題，若是渲染的是不一樣類型的狀態性組件，組件將會被替換，狀態丟失