前端開發面試總結（三）

React生命週期

React的生命週期分爲三個階段：一、初始化，二、更新，三、銷燬。

初始化階段

• 一、getDefaultProps()：設置默認的props，也能夠用defaultProps設置組件的默認屬性。這個函數在React的生命週期中只會調用一次。
• 二、getInitialState()：在每個組件的實例中這個方法的調用只有一次，用來初始化每個實例的state，React的state和props的區別主要是state只存在與組件的內部，props能夠在全部的實例中共享。
• 三、componentWillMount()：該方法只會在組件初始化的時候被調用，在組件存在期間則不會被調用。該方法在整個生命週期中只會被調用一次，能夠修改state。
• 四、render()：render()函數在執行的過程當中，最重要的操做是建立虛擬DOM，運行diff算法，更新DOM樹的操做都會在這個函數中進行。
• 五、componentDidMount()：該方法會在組件被渲染完成以後調用，並且只會被調用一次。

更新階段

• 六、componentWillReceiveProps(nextProps)：該方法在組件初始化的時候不會被調用，當組件在接收新的props的時候纔會調用這個函數。
• 七、shouldComponentUpdate(nextProps, nextState)：這是React性能優化過程當中最重要的一環，當組件在接收新的state或者props時會被調用。能夠在這個函數中判斷先後的兩個props或者state是否相同，若是相同就返回false阻止DOM更新，這樣一來就不須要再執行diff算法進行比較，也不用渲染新的DOM樹，這樣能夠大幅度的提升代碼運行的性能。能夠人爲的在這個方法中返回false，阻止DOM更新。
• 八、componentWillUpdate(nextProps, nextState)：組件初始化的時候不會調用這個函數，只有在組件將要發生更新以前調用這個函數，在這個函數中能夠修改state。
• 九、render()：實現組件渲染。

卸載

• 十、componentWillUnmount()：該方法會在組件將要被卸載的時候調用。

生命週期函數在實例化階段被調用的過程：

(1)當組件在客戶端被實例化時，如下的函數將被依次調用

• 一、getDefaultProps()
• 二、getInitialState()
• 三、componentWillMount()
• 四、render()
• 五、componentDidMount()

(2)當組件在服務端被實例化時，如下的函數將被依次調用

• 一、getDefault()
• 二、getInitialState()
• 三、componentWillMount()
• 四、render()

render()方法

該方法在執行的時候會建立一個虛擬的DOM，用於表示對組件的輸出，render()方法是每個組件都必需要有的方法，render()方法必需要知足如下幾點：

• 一、只能經過this.props和this.state這兩種方式訪問數據。
• 二、render()方法能夠返回null，false或者任何React組件。
• 三、render()只能返回一個頂級組件或者元素，不能夠返回多個組件或者元素。
• 四、render()函數中不能改變組件的狀態。
• 五、不能修改DOM的輸出。
• 六、render()函數最終返回的不是真正的DOM元素，而是一個虛擬的DOM樹。

componentDidMount()

這個方法不會在服務端被渲染的時候調用，該方法會在DOM渲染完成以後被調用，能夠在該方法中使用this.getDOMNode()訪問到真實的DOM。推薦使用ReactDOM.findDOMMode()得到真實的DOM元素。虛擬DOM只是存在於內存中的一種數據結構，只有在真正插入到文檔中以後纔會變成真正的DOM節點。

組件在存在期間，如下函數將會被依次調用

• 一、componentWillReceiveProps()
• 二、shouldComponentWillUpdate()
• 三、componentWillUpdate()
• 四、render()
• 五、componentDidMount()

Redux數據流的流程

Redux是一種Javascript狀態容器，提供可預測的狀態管理。可預測指的是根據一個固定的輸入就能夠獲得一個固定的結果。

Redux的意義：隨着單頁面應用的普及，web app內部須要管理的狀態也愈來愈多，這些狀態有的來自於服務器，有用於交互的數據，有組件的狀態，Redux就是用來對這些狀態進行統一管理的。

Redux的三個原則：

• 一、單一的數據源：全部的state都被存儲到一個單一的數據源store中。
• 二、state是隻讀的：state是隻讀的，能改變state的惟一方式就是經過觸發action來修改state。
• 三、使用純函數進行修改：須要編寫reducers來描述action如何改變redux，reducers是一些純函數，根據action返回對應的state，並且必需要有返回。

action

action能夠用來修改state的值，並且action是修改state的惟一的方法。action是一個普通的javascript對象，該對象必須有一個type字段，表示action的名稱，

reducer

reducer用於描述action如何對state進行修改，Reducer是一種純函數。

store

store是redux的惟一的數據源。

使用Redux

• 安裝Redux

npm install redux --save
複製代碼

Redux如何實現多個組件之間的通訊？多個組件使用相同的狀態如何管理？

Redux中提供了connect和provide來實現多個組件之間的通訊，管理多個組件使用的相同的狀態。

connect()函數

export connect(mapStateToProps, mapDispatchToProps)(Home)
複製代碼

• (1)mapStateToProps

mapStateToProps是一個函數，用於創建一個從外部的state對象到UI組件的props對象的映射關係。接收state做爲參數，最終返回一個對象。mapStateToProps會訂閱store，當state更新的時候就會自動執行。從新計算UI組件的參數，觸發UI組件的從新渲染。

• (2)mapDispatchToProps

mapDispatchToProps是connect函數的第二個參數，用來創建UI組件的參數到store.dispatch方法的映射。也就是說，它定義了哪些用戶操做應該當作Action傳給Store。

Provider

connect方法生成容器組件之後，須要讓容器組件拿到state對象，才能生成UI組件的參數。Provider就是把咱們用Redux建立的store傳遞到內部的其餘組件，讓內部組件能夠享有這個store並提供對state的更新。