React Native面試知識點

ReactNative開發圈發表於2018-03-27

本文原創首發於公眾號：ReactNative開發圈，轉載需註明出處。

本文會不定期不斷更新，想檢視最新版本請移步至https://github.com/forrest23/react-native-interview

1.React Native相對於原生的ios和Android有哪些優勢？

1.效能媲美原生APP 2.使用JavaScript編碼，只要學習這一種語言 3.絕大部分程式碼安卓和IOS都能共用 4.元件式開發，程式碼重用性很高 5.跟編寫網頁一般，修改程式碼後即可自動重新整理，不需要慢慢編譯，節省很多編譯等待時間 6.支援APP熱更新，更新無需重新安裝APP

缺點：記憶體佔用相對較高版本還不穩定，一直在更新，現在還沒有推出穩定的1.0版本

2.React Native元件的生命週期

生命週期呼叫次數能否使用 setSate() getDefaultProps 1(全域性呼叫一次) 否 getInitialState 1 否 componentWillMount 1 是 render >=1 否 componentDidMount 1 是 componentWillReceiveProps >=0 是 shouldComponentUpdate >=0 否 componentWillUpdate >=0 否 componentDidUpdate >=0 否 componentWillUnmount 1 否

3.當你呼叫setState的時候，發生了什麼事？

當呼叫 setState 時，React會做的第一件事情是將傳遞給 setState 的物件合併到元件的當前狀態。這將啟動一個稱為和解（reconciliation）的過程。和解（reconciliation）的最終目標是以最有效的方式，根據這個新的狀態來更新UI。為此，React將構建一個新的 React 元素樹（您可以將其視為 UI 的物件表示）。一旦有了這個樹，為了弄清 UI 如何響應新的狀態而改變，React 會將這個新樹與上一個元素樹相比較（ diff ）。通過這樣做， React 將會知道發生的確切變化，並且通過了解發生什麼變化，只需在絕對必要的情況下進行更新即可最小化 UI 的佔用空間。

4.props和state相同點和不同點

1.不管是props還是state的改變，都會引發render的重新渲染。 2.都能由自身元件的相應初始化函式設定初始值。

不同點 1.初始值來源：state的初始值來自於自身的getInitalState（constructor）函式；props來自於父元件或者自身getDefaultProps（若key相同前者可覆蓋後者）。

2.修改方式：state只能在自身元件中setState，不能由父元件修改；props只能由父元件修改，不能在自身元件修改。

3.對子元件：props是一個父元件傳遞給子元件的資料流，這個資料流可以一直傳遞到子孫元件；state代表的是一個元件內部自身的狀態，只能在自身元件中存在。

5.shouldComponentUpdate 應該做什麼

其實這個問題也是跟reconciliation有關係。 “和解（ reconciliation ）的最終目標是以最有效的方式，根據新的狀態更新使用者介面”。如果我們知道我們的使用者介面（UI）的某一部分不會改變，那麼沒有理由讓 React 很麻煩地試圖去弄清楚它是否應該渲染。通過從 shouldComponentUpdate 返回 false， React 將假定當前元件及其所有子元件將保持與當前元件相同

6.reactJS的props.children.map函式來遍歷會收到異常提示，為什麼？應該如何遍歷？

this.props.children 的值有三種可能： 1.當前元件沒有子節點，它就是 undefined; 2.有一個子節點，資料型別是 object ； 3.有多個子節點，資料型別就是 array 。系統提供React.Children.map()方法安全的遍歷子節點物件

7.redux狀態管理的流程

action是使用者觸發或程式觸發的一個普通物件。 reducer是根據action操作來做出不同的資料響應，返回一個新的state。 store的最終值就是由reducer的值來確定的。（一個store是一個物件, reducer會改變store中的某些值） action -> reducer -> 新store -> 反饋到UI上有所改變。

8.載入bundle的機制

要實現RN的指令碼熱更新，我們要搞明白RN是如何去載入指令碼的。在編寫業務邏輯的時候，我們會有許多個js檔案，打包的時候RN會將這些個js檔案打包成一個叫index.android.bundle(ios的是index.ios.bundle)的檔案，所有的js程式碼(包括rn原始碼、第三方庫、業務邏輯的程式碼)都在這一個檔案裡，啟動App時會第一時間載入bundle檔案，所以指令碼熱更新要做的事情就是替換掉這個bundle檔案。

9.Flex佈局

採用Flex佈局的元素，稱為Flex容器（flex Container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱"專案"。

容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

容器的屬性以下6個屬性設定在容器上。 flex-direction 屬性決定主軸的方向（即專案的排列方向)。 flex-wrap 屬性定義，如果一條軸線排不下，如何換行。 flex-flow flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式。 justify-content 定義了專案在主軸上的對齊方式。 align-items 屬性定義專案在交叉軸上如何對齊。 align-content align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

10.請簡述 code push 的原理

code push 呼叫 react native 的打包命令，將當前環境的非 native 程式碼全量打包成一個 bundle 檔案，然後上傳到微軟雲伺服器（Windows Azure）。在 app 中啟動頁（或 splash 頁）編寫請求更新的程式碼（請求包含了本地版本，hashCode、appToken 等資訊），微軟服務端對比本地 js bundle 版本和微軟伺服器的版本，如果本地版本低，就下載新的 js bundle 下來後實現更新(code push 框架實現)。

11.Redux中同步 action 與非同步 action 最大的區別是什麼

同步只返回一個普通 action 物件。而非同步操作中途會返回一個 promise 函式。當然在 promise 函式處理完畢後也會返回一個普通 action 物件。thunk 中介軟體就是判斷如果返回的是函式，則不傳導給 reducer，直到檢測到是普通 action 物件，才交由 reducer 處理。