React Native面試知識點

本文原創首發於公衆號：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 處理。

---

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

本文題目節選自互聯網，若有侵權請聯繫我！

歡迎關注個人微信公衆號：ReactNative開發圈