part 2
1.React Native相對于原生的ios和Android有哪些優(yōu)勢蚁袭?
1.性能媲美原生APP2.使用JavaScript編碼,只要學(xué)習(xí)這一種語言3.絕大部分代碼安卓和IOS都能共用4.組件式開發(fā)揩悄,代碼重用性很高5.跟編寫網(wǎng)頁一般,修改代碼后即可自動刷新亏娜,不需要慢慢編譯蹬挺,節(jié)省很多編譯等待時間6.支持APP熱更新,更新無需重新安裝APP
缺點:內(nèi)存占用相對較高版本還不穩(wěn)定溯泣,一直在更新榕茧,現(xiàn)在還沒有推出穩(wěn)定的1.0版本
2.React Native組件的生命周期
生命周期 調(diào)用次數(shù) 能否使用 setSate()getDefaultProps 1(全局調(diào)用一次) 否getInitialState 1 否componentWillMount 1 是render >=1 否componentDidMount 1 是componentWillReceiveProps >=0 是shouldComponentUpdate >=0 否componentWillUpdate >=0 否componentDidUpdate >=0 否componentWillUnmount 1 否
3.當(dāng)你調(diào)用setState的時候,發(fā)生了什么事肢簿?
當(dāng)調(diào)用 setState 時蜻拨,React會做的第一件事情是將傳遞給 setState 的對象合并到組件的當(dāng)前狀態(tài)。這將啟動一個稱為和解(reconciliation)的過程缎讼。和解(reconciliation)的最終目標(biāo)是以最有效的方式休涤,根據(jù)這個新的狀態(tài)來更新UI笛辟。為此,React將構(gòu)建一個新的 React 元素樹(您可以將其視為 UI 的對象表示)欠肾。一旦有了這個樹围来,為了弄清 UI 如何響應(yīng)新的狀態(tài)而改變匈睁,React 會將這個新樹與上一個元素樹相比較( diff )。通過這樣做航唆, React 將會知道發(fā)生的確切變化糯钙,并且通過了解發(fā)生什么變化,只需在絕對必要的情況下進行更新即可最小化 UI 的占用空間任岸。
4.props和state相同點和不同點
1.不管是props還是state的改變,都會引發(fā)render的重新渲染困鸥。2.都能由自身組件的相應(yīng)初始化函數(shù)設(shè)定初始值剑按。
不同點1.初始值來源:state的初始值來自于自身的getInitalState(constructor)函數(shù);props來自于父組件或者自身getDefaultProps(若key相同前者可覆蓋后者)虐译。
2.修改方式:state只能在自身組件中setState吴趴,不能由父組件修改;props只能由父組件修改厢拭,不能在自身組件修改撇叁。
3.對子組件:props是一個父組件傳遞給子組件的數(shù)據(jù)流,這個數(shù)據(jù)流可以一直傳遞到子孫組件楞捂;state代表的是一個組件內(nèi)部自身的狀態(tài),只能在自身組件中存在胶坠。
5.shouldComponentUpdate 應(yīng)該做什么
其實這個問題也是跟reconciliation有關(guān)系繁堡。“和解( reconciliation )的最終目標(biāo)是以最有效的方式闻牡,根據(jù)新的狀態(tài)更新用戶界面”绳矩。如果我們知道我們的用戶界面(UI)的某一部分不會改變,那么沒有理由讓 React 很麻煩地試圖去弄清楚它是否應(yīng)該渲染埋酬。通過從 shouldComponentUpdate 返回 false写妥,React 將假定當(dāng)前組件及其所有子組件將保持與當(dāng)前組件相同
6.reactJS的props.children.map函數(shù)來遍歷會收到異常提示审姓,為什么?應(yīng)該如何遍歷扎筒?
this.props.children 的值有三種可能:1.當(dāng)前組件沒有子節(jié)點酬姆,它就是 undefined;2.有一個子節(jié)點,數(shù)據(jù)類型是 object 骨宠;3.有多個子節(jié)點相满,數(shù)據(jù)類型就是 array 。系統(tǒng)提供React.Children.map()方法安全的遍歷子節(jié)點對象
7.redux狀態(tài)管理的流程
action是用戶觸發(fā)或程序觸發(fā)的一個普通對象立美。reducer是根據(jù)action操作來做出不同的數(shù)據(jù)響應(yīng),返回一個新的state建蹄。store的最終值就是由reducer的值來確定的。(一個store是一個對象, reducer會改變store中的某些值)action -> reducer -> 新store -> 反饋到UI上有所改變痛单。
8.加載bundle的機制
要實現(xiàn)RN的腳本熱更新,我們要搞明白RN是如何去加載腳本的蔫巩。 在編寫業(yè)務(wù)邏輯的時候快压,我們會有許多個js文件,打包的時候RN會將這些個js文件打包成一個叫index.android.bundle(ios的是index.ios.bundle)的文件坪郭,所有的js代碼(包括rn源代碼脉幢、第三方庫、業(yè)務(wù)邏輯的代碼)都在這一個文件里沪曙,啟動App時會第一時間加載bundle文件萎羔,所以腳本熱更新要做的事情就是替換掉這個bundle文件。
9.Flex布局
采用Flex布局的元素缘眶,稱為Flex容器(flex Container)髓废,簡稱"容器"。它的所有子元素自動成為容器成員顶燕,稱為Flex項目(flex item)蒋譬,簡稱"項目"。
容器默認存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)癣漆。主軸的開始位置(與邊框的交叉點)叫做main start剂买,結(jié)束位置叫做main end癌蓖;交叉軸的開始位置叫做cross start婚肆,結(jié)束位置叫做cross end较性。
項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size赞咙,占據(jù)的交叉軸空間叫做cross size。
容器的屬性以下6個屬性設(shè)置在容器上院仿。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 調(diào)用 react native 的打包命令匈子,將當(dāng)前環(huán)境的非 native 代碼全量打包成一個 bundle 文件,然后上傳到微軟云服務(wù)器(Windows Azure)游岳。 在 app 中啟動頁(或 splash 頁)編寫請求更新的代碼(請求包含了本地版本,hashCode喷户、appToken 等信息)访锻,微軟服務(wù)端對比本地 js bundle 版本和微軟服務(wù)器的版本,如果本地版本低河哑,就下載新的 js bundle 下來后實現(xiàn)更新(code push 框架實現(xiàn))哭懈。
11.Redux中同步 action 與異步 action 最大的區(qū)別是什么
同步只返回一個普通 action 對象。而異步操作中途會返回一個 promise 函數(shù)睬罗。當(dāng)然在 promise 函數(shù)處理完畢后也會返回一個普通 action 對象旭斥。thunk 中間件就是判斷如果返回的是函數(shù),則不傳導(dǎo)給 reducer花盐,直到檢測到是普通 action 對象菇爪,才交由 reducer 處理。
part 1
1.props和state的區(qū)別熙揍?
現(xiàn)在我們來總結(jié)下,props與state的區(qū)別:
- props是指組件間傳遞的一種方式氏涩,props自然也可以傳遞state是尖。由于React的數(shù)據(jù)流是自上而下的,所以是從父組件向子組件進行傳遞饺汹;另外組件內(nèi)部的this.props屬性是只讀的不可修改!
- state是組件內(nèi)部的狀態(tài)(數(shù)據(jù))作郭,不能夠直接修改,必須要通過setState來改變值的狀態(tài)蜘醋,從而達到更新組件內(nèi)部數(shù)據(jù)的作用咏尝。
props和state是經(jīng)常要結(jié)合使用的编检,父組件的state可以轉(zhuǎn)化為props來為子組件進行傳值。在這種情況下厕怜,子組件接收的props是只讀的蕾总,想要改變值,只能通過父組件的state對其進行更改递雀。
props 和 state的區(qū)別 http://www.cnblogs.com/ysbpysbp/p/6115900.html
2.知道react-native的生命周期么蚀浆?
http://www.reibang.com/p/ea61a014ce4e
http://www.reibang.com/p/379aecebb1dc
3.react-native父組件和子組件直接如何交互市俊?
父控件調(diào)用子控件中的方法
在父控件中給子控件設(shè)置ref="ref1",然后設(shè)置button點擊事件。在button點擊事件中通過this.refs.ref1.buttonClick()來調(diào)用子控件中的方法
子控件調(diào)用父控件中的方法
在父控件中嵌套子控件的時候蠢甲,給子控件添加事件屬性据忘,eg:
在父控件中給子控件添加了onPress={()=>this.btnClick()} 和onClick={()=>this.btn2Click()}事件
然后在子控件中通過this.props.onPress();調(diào)用父控件的()=>this.btnClick()方法搞糕。通過this.props.onClick();調(diào)用父控件的()=>this.btn2Click()方法
4.react-native父組件和兄弟組件之間如何交互?
Event Emitter/Target/Dispatcher :需要從EventEmitter/EventTarget/EventDispatcher繼承或者實現(xiàn)合適的接口
Signals:與Event Emitter/Target/Dispatcher 相比窍仰,不需要指定事件的“名稱”,可以避免硬編碼帶來的問題
Publish / Subscribe : 類似于很多語言中的事件總線EventBus廣播的方式,相比EventEmitter晶伦,優(yōu)點是組件之間可以完全獨立啄枕,沒有任何關(guān)聯(lián)频祝。React中比較常用的是庫是PubSubJS,關(guān)于這個庫的詳細使用請查看官方的說明
[React Native]組件之間通信 http://www.reibang.com/p/9b0d5a3d0518
5.如果給setState傳入第二個參數(shù)沽一,那這第二個參數(shù)有什么作用漓糙?是干什么的?
一個回調(diào)函數(shù)蝗蛙,當(dāng)setState結(jié)束并重新呈現(xiàn)該組件時將被調(diào)用为狸。
一些沒有說出來的東西是setState是異步的,這就是為什么它需要一個第二個回調(diào)函數(shù)病曾。通常情況下漾根,最好使用另一種生命周期方法,而不是依賴這個回調(diào)函數(shù)逼蒙,但是很高興知道它存在寄疏。
this.setState( { username: 'tylermcginnis33' }, () => console.log('setState has finished and the component has re-rendered.') )
6.rn怎么跟原生進行交互?
JS調(diào)用原生
在調(diào)用原生時驳棱,我們需要實現(xiàn)RCTBridgeModule和RCT_EXPORT_MODULE();
RCT_EXPORT_MODULE();則是一個宏定義农曲,返回moduleName,并且調(diào)用+ load方法注冊
老版本的調(diào)用方式為形葬,但是接口被標(biāo)記為deprecated:__deprecated_msg("Subclass RCTEventEmitter instead");
[self.bridge.eventDispatcher sendAppEventWithName:kGiftReloadData body:nil];
新版本的調(diào)用方式為
ZanEventEmitter *emitter = [[ZanEventEmitter alloc] init]; emitter.bridge = self.bridge; [emitter sendEventWithName:kGiftReloadData body:nil];
http://www.reibang.com/p/ea61a014ce4e
7.用過fetch么?那你知道fetch和ajax的區(qū)別么笙以?
簡單來說 Ajax的本質(zhì)是使用XMLHttpRequest對象來請求數(shù)據(jù);而fetch是用于發(fā)送請求的API翩伪。
具體的看這篇文章(http://www.cnblogs.com/September-9/p/7099975.html)谈息,因為ajax我沒用過,對他不是很了解轻姿。